我尝试制作一个移动的img
,它可以部分工作。如果我按下向右、向上或向下按钮,它就会向右、向上或向下移动。但是,如果我按左按钮,它会非常快地跳到右侧很远,然后回到左侧并且不会停止移动(我相信。我说它很快)。
JSFiddle ;
JavaScript:
$(document).ready(function() {
var up = down = left = right = false;
var top = 100, left = 500;
$("body").on("keydown", function(e) {
if(e.keyCode == 39) {e.preventDefault(); if (right == false) right = setInterval(moveRight, 80);}
else if(e.keyCode == 37) {e.preventDefault(); if (left == false) left = setInterval(moveLeft, 80);}
else if(e.keyCode == 38) {e.preventDefault(); if (up == false) up = setInterval(moveUp, 80);}
else if(e.keyCode == 40) {e.preventDefault(); if (down == false) down = setInterval(moveDown, 80);}
});
$("body").on("keyup", function(e) {
if(e.keyCode == 39) {clearInterval(right); right = false;}
else if(e.keyCode == 37) {clearInterval(left); left = false;}
else if(e.keyCode == 38) {clearInterval(up); up = false;}
else if(e.keyCode == 40) {clearInterval(down); down = false;}
});
function moveUp() {
top -= 2;
$("#player").css("top", top + "px");
}
function moveDown() {
top += 2;
$("#player").css("top", top + "px");
}
function moveLeft() {
left -= 2;
$("#player").css("left", left + "px");
}
function moveRight() {
left += 2;
$("#player").css("left", left + "px");
}
});
这可能不是最好的方法,我愿意寻求更好的建议。
最佳答案
您正在定义两个“左”变量,它们互相妨碍。更改它们的名称之一(可能是间隔变量的 leftInterval),事情应该会变得更好。
关于javascript - jquery 位置随着 .css() 的行为发生变化而变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11313670/