用JS做一个div以键盘上下左右控制移动
整个代码如下做完后发现按住上键（其他键也一样）他会顿一下再一直向上走这个问题应该怎么解决<!DOCTYPEhtml><htmllang="en"><head><metac...
整个代码如下 做完后发现按住上键（其他键也一样） 他会顿一下再一直向上走 这个问题应该怎么解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 100px;
height: 100px;
position: absolute;
background: #CCC;
top:500px;
left: 200px;
}
</style>
<script>
window.onkeydown = function(ev){
var oEvent = ev||event
var oDiv = document.getElementById('div1')
if (oEvent.keyCode== 39) {
oDiv.style.left = oDiv.offsetLeft + 10 +'px'
}else if(oEvent.keyCode == 37){
oDiv.style.left = oDiv.offsetLeft - 10 +'px'
}else if (oEvent.keyCode == 38){
oDiv.style.top = oDiv.offsetTop -10 +'px'
}else if (oEvent.keyCode == 40) {
oDiv.style.top = oDiv.offsetTop +10 +'px'
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html> 展开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 100px;
height: 100px;
position: absolute;
background: #CCC;
top:500px;
left: 200px;
}
</style>
<script>
window.onkeydown = function(ev){
var oEvent = ev||event
var oDiv = document.getElementById('div1')
if (oEvent.keyCode== 39) {
oDiv.style.left = oDiv.offsetLeft + 10 +'px'
}else if(oEvent.keyCode == 37){
oDiv.style.left = oDiv.offsetLeft - 10 +'px'
}else if (oEvent.keyCode == 38){
oDiv.style.top = oDiv.offsetTop -10 +'px'
}else if (oEvent.keyCode == 40) {
oDiv.style.top = oDiv.offsetTop +10 +'px'
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html> 展开
1个回答
展开全部
只走一步是因为移动一次后没有对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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
黄先生
2024-12-27 广告
矩阵切换器就是将一路或多路视音频信号分别传输给一个或者多个显示设备，如两台电脑主机要共用一个显示器，矩阵切换器可以将两台电脑主机上的内容renyi切换到同一个或多个显示器上；迈拓维矩矩阵切换器种类齐全，性价比高，支持多种控制方式，为工程商采...
点击进入详情页
本回答由黄先生提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
