jquery位置随着.css()行为的奇怪而变化
jquery position changing with .css() behaving strange
我试图做一个移动的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),事情应该会变得更好。
变量被覆盖,请尝试类似以下内容:
$("body").on("keydown", function(e) {
e.preventDefault();
var elm = $("#player"),
top = parseInt(elm.css('top')),
left = parseInt(elm.css('left'));
switch(e.which) {
case 37:
elm.css("left", left-2);
break;
case 38:
elm.css("top", top-2);
break;
case 39:
elm.css("left", left+2);
break;
case 40:
elm.css("top", top+2);
break;
}
});
小提琴
相关文章:
- CSS.滚动后元素位置发生变化
- 在变换的绝对位置发生变化时制作动画's参数
- googleMap标记旋转位置发生变化
- jquery位置随着.css()行为的奇怪而变化
- jquery动态位置变化
- 在谷歌地图中检查位置变化
- 两个按钮,可随背景位置变化而切换,并在输入中显示结果
- 实体位置发生变化时未进行可视化更新
- 一个不断变化的JavaScript变量在HTML中的多个位置显示(并更新)
- 父Div的大小会导致控件在子Div中的位置发生变化
- 如果按钮位置发生变化,ZClip SWF不会与按钮位置对齐
- 使用JavaScript,这样当点击图像时,另一个元素's的位置发生了变化
- 如何在Javascript中获取位置变化事件
- 使用纯Javascript检测DOM元素的位置变化
- 如何防止在更新图的nodeDataArray后所有组件的位置发生变化
- 如何在点击按钮时实现背景图像位置变化的幻灯片效果
- 显示位置的变化在谷歌地图上没有重新加载地图一次又一次
- 如何用jquery检测位置的变化
- jQuery缩放效果,缩放在1.1和回1时,背景位置的变化
- 如何在元素位置变化时设置$watch