当前位置：首页 > news >正文

邢台手机网站建设地方/宁波seo网络推广选哪家

news 2025/8/5 7:40:10

邢台手机网站建设地方,宁波seo网络推广选哪家,大连网站建设仟亿科技,正规网站开发需要哪些技术使div随着键盘上下左右键的触发而移动， 思路：获取div，为document绑定键盘按下事件，在事件中使用switch…case来判断键盘按下的是哪一个键，对应的keyCode对应着不同的方向键： 左键被按下：在div现…

使div随着键盘上下左右键的触发而移动，

思路：获取div，为document绑定键盘按下事件，在事件中使用switch…case来判断键盘按下的是哪一个键，对应的keyCode对应着不同的方向键：

左键被按下：在div现有的坐标值中，left的值减掉对应的值即可，值越大，移动的速度越快。
```
box.style.left = box.offsetLeft - speed +"px";
```
上键被按下：在div现有的坐标值中，top的值减掉对应的值即可，值越大，移动的速度越快。
```
box.style.top = box.offsetTop - speed +"px";
```
右键被按下：在div现有的坐标值中，left的值加上对应的值即可，值越大，移动的速度越快。
```
box.style.left = box.offsetLeft + speed +"px";
```
下键被按下：在div现有的坐标值中，left的值加上对应的值即可，值越大，移动的速度越快。
```
box.style.top = box.offsetTop + speed +"px";
```

注意：在修改div的值时，需要在末尾为其拼上“px”，因为div的坐标是靠带px的像素点决定的，而offsetLeft或者offsetTop获取到的是一个Number类型值。

整体的练习代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>键盘移动div</title><style type="text/css">#box{width: 100px;height: 100px;position: absolute;background-color: red;}</style><script type="text/javascript">window.onload = function(){var box = document.getElementById("box");document.onkeydown = function(event){// alert("绑定成功");event = event || window.event;// alert(event.keyCode);//定义变量，表示div移动的速度var speed = 10;if(event.ctrlKey){speed += 50;}switch(event.keyCode){case 37 :box.style.left = box.offsetLeft - speed +"px";if(box.offsetLeft < 0){box.offsetLeft = 0 +"px";}break;case 38 :box.style.top = box.offsetTop - speed +"px";if(box.offsetTop < 0){box.offsetTop = 0;}break;case 39 :box.style.left = box.offsetLeft + speed +"px";break;case 40 :box.style.top = box.offsetTop + speed +"px";break; default : return 0;}};};</script>
</head>
<body><div id="box"></div>
</body>
</html>