jQuery通过键盘上下左右键，移动层
今天做了一个小例子，想通过键盘的上下左右键来移动层，选择的方法是，层的绝对定位，但是一个方向上，只能走一步，javascript好使，jquery不好使。很纠结，我是一个...
今天做了一个小例子，想通过键盘的上下左右键来移动层，选择的方法是，层的绝对定位，但是一个方向上，只能走一步，javascript好使，jquery不好使。
很纠结，我是一个初学者，求高手指点。
$(document).keydown(function(event){
switch(event.which){
case 37:$("#person").css("left",((x-10)+"px"));break;
case 38:$("#person").css("top",((x-10)+"px"));break;
case 39:$("#person").css("left",((x+10)+"px"));break;
case 40:$("#person").css("top",((x+10)+"px"));break;
default:break;
}
});
#person 是需要移动的层的id。另外，如果左键和上键一起按，能不能让他走斜线啊，应该怎么处理？？？ 展开
很纠结，我是一个初学者，求高手指点。
$(document).keydown(function(event){
switch(event.which){
case 37:$("#person").css("left",((x-10)+"px"));break;
case 38:$("#person").css("top",((x-10)+"px"));break;
case 39:$("#person").css("left",((x+10)+"px"));break;
case 40:$("#person").css("top",((x+10)+"px"));break;
default:break;
}
});
#person 是需要移动的层的id。另外，如果左键和上键一起按，能不能让他走斜线啊，应该怎么处理？？？ 展开
3个回答
展开全部
只走一步是因为移动一次后没有对x进行处理，所以点第二次的时候 x的值不变，x-10也不变，所以就不动了
<html>
<head>
<title>demo</title>
<style type="text/css">
.active
{
border: 1px solid red;
}
</style>
<script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
var x = 0;//水平方向位移
var y = 0;//垂直方向位移
$(document).keydown(function (event) {
switch (event.which) {
case 37: y = y - 10; $("#person").css("left", y + "px"); break;
case 38: x = x - 10; $("#person").css("top", x + "px"); break;
case 39: y = y + 10; $("#person").css("left", y + "px"); break;
case 40: x = x + 10; $("#person").css("top", x + "px"); break;
default: break;
}
});
</script>
</head>
<body>
<div id="person" class="active" style="position: absolute; width: 50px; height: 50px;" />
</body>
</html>
<html>
<head>
<title>demo</title>
<style type="text/css">
.active
{
border: 1px solid red;
}
</style>
<script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
var x = 0;//水平方向位移
var y = 0;//垂直方向位移
$(document).keydown(function (event) {
switch (event.which) {
case 37: y = y - 10; $("#person").css("left", y + "px"); break;
case 38: x = x - 10; $("#person").css("top", x + "px"); break;
case 39: y = y + 10; $("#person").css("left", y + "px"); break;
case 40: x = x + 10; $("#person").css("top", x + "px"); break;
default: break;
}
});
</script>
</head>
<body>
<div id="person" class="active" style="position: absolute; width: 50px; height: 50px;" />
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$(document).ready(function(){
$(document).keydown(function(e){
switch(e.which){
case 37: $('#person').css('left','-=10');break;
case 38: $('#person').css('top','-=10');break;
case 39: $('#person').css('left','+=10');break;
case 40: $('#person').css('top','+=10');break;
}
});
}); 这样就可以了 如果两个键同时按的话就走斜线 测试成功
$(document).keydown(function(e){
switch(e.which){
case 37: $('#person').css('left','-=10');break;
case 38: $('#person').css('top','-=10');break;
case 39: $('#person').css('left','+=10');break;
case 40: $('#person').css('top','+=10');break;
}
});
}); 这样就可以了 如果两个键同时按的话就走斜线 测试成功
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
设置x、y方向的标记，移动的时候判断这两个标记设置相应位置就行了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
