<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload=function(){
var box = document.getElementById("box");
document.onkeydown = function(event){
event = event || window.event;
switch(event.keyCode){
case 37:
box.style.left = box.offsetLeft-10+"px";
break;
case 38:
box.style.top = box.offsetHeight-10+"px";
break;
case 39:
box.style.left = box.offsetLeft+10+"px";
break;
case 40:
box.style.top = box.offsetHeight+10+"px";
break;
default:
alert("请按下方向键");
}
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
请教大佬键盘控制div方块移动,为什么上下只能移动一次,左右没有问题
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
2条回答 默认 最新
- Go 旅城通票 2021-03-16 11:52关注
offsetHeight是div高度,值不变都是一样的所以看起来就是一次性效果,改为offsetTop
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 1无用
悬赏问题
- ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
- ¥15 活动选择题。最多可以参加几个项目?
- ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
- ¥15 vs2019中数据导出问题
- ¥20 云服务Linux系统TCP-MSS值修改?
- ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
- ¥20 怎么在stm32门禁成品上增加查询记录功能
- ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
- ¥50 NT4.0系统 STOP:0X0000007B
- ¥15 想问一下stata17中这段代码哪里有问题呀