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';
}
});
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 272839
Url: https://administrator.de/contentid/272839
Ausgedruckt am: 26.11.2024 um 02:11 Uhr
2 Kommentare
Neuester Kommentar
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>
