2
Mit Javascript html Element bewegen
Hallo,
ich habe einen Javascript geschrieben der ein HTML Element bewegt.
Er verändert den Abstand zu anderen Elementen mit CSS, so bewegt dich in diesem falle ein Punkt.
Das problem ist das der Script nur einmal kurz und nach dem drücken der Pfeiltaste nicht mehr läuft. Das
heißt, ich kaann den Punkt nicht unendlich lang bewegen. Der Code sieht so aus:
document.addEventListener('keydown', function(event) {
var code = event.keyCode;
if (code == 37) {
document.getElementById('p1').style.marginRight ='20px';
}
if (code == 38) {
document.getElementById('p1').style.marginBottom ='20px';
}
if (code == 39) {
document.getElementById('p1').style.marginLeft ='20px';
}
if (code == 40) {
document.getElementById('p1').style.marginTop ='20px';
}
});
ich habe einen Javascript geschrieben der ein HTML Element bewegt.
Er verändert den Abstand zu anderen Elementen mit CSS, so bewegt dich in diesem falle ein Punkt.
Das problem ist das der Script nur einmal kurz und nach dem drücken der Pfeiltaste nicht mehr läuft. Das
heißt, ich kaann den Punkt nicht unendlich lang bewegen. Der Code sieht so aus:
document.addEventListener('keydown', function(event) {
var code = event.keyCode;
if (code == 37) {
document.getElementById('p1').style.marginRight ='20px';
}
if (code == 38) {
document.getElementById('p1').style.marginBottom ='20px';
}
if (code == 39) {
document.getElementById('p1').style.marginLeft ='20px';
}
if (code == 40) {
document.getElementById('p1').style.marginTop ='20px';
}
});
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 272839
Url: https://administrator.de/contentid/272839
Printed on: April 19, 2024 at 04:04 o'clock
2 Comments
Latest comment
Moin,
sollte eigentlich klar sein wenn man mal sein Hirn einschaltet, denn du setzt den Margin immer nur auf den selben Wert, nämlich 20px also geht das nur einmal, du musst also immer jeweils weitere 20px hinzu addieren
Gruß jodel32
sollte eigentlich klar sein wenn man mal sein Hirn einschaltet, denn du setzt den Margin immer nur auf den selben Wert, nämlich 20px also geht das nur einmal, du musst also immer jeweils weitere 20px hinzu addieren
Gruß jodel32
Moin zusammen,
Beispiel: http://jsfiddle.net/sq7wxbby/3/
Grüße Uwe
Beispiel: http://jsfiddle.net/sq7wxbby/3/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<script type="text/javascript">
document.addEventListener('keydown', function(event) {
var el = document.getElementById('point');
var increment = 20;
switch(event.keyCode){
case 37: //left
var pos = ((el.offsetLeft-increment) > 0 ) ? el.offsetLeft - increment : 0;
el.style.left = pos + "px";
break;
case 38: //up
var pos = ((el.offsetTop - increment) > 0 ) ? el.offsetTop - increment : 0;
el.style.top = pos + "px";
break;
case 39: //right
var pos = ((el.offsetLeft + increment) < window.innerWidth - el.width ) ? el.offsetLeft + increment : window.innerWidth - el.width;
el.style.left = pos + "px";
break;
case 40: //down
var pos = ((el.offsetTop + increment) < window.innerHeight - el.height ) ? el.offsetTop + increment : window.innerHeight - el.height;
el.style.top = pos + "px";
break;
}
});
</script>
<style type="text/css">
body{margin:0}
#point{position:absolute}
</style>
<body>
<img id="point" src="http://forum.linux-club.de/images/avatars/gallery/smilies/fi_av_smiles_y_57.gif" />
</body>
</html>
