为代码添加事件监听,实现物体上移,下移的效果
时间: 2024-02-22 21:57:01 浏览: 25
好的,以下是加入事件监听,实现物体上移、下移效果的代码示例:
HTML代码:
```html
<div id="box" style="width: 50px; height: 50px; background-color: red; position: absolute; top: 100px; left: 100px;"></div>
```
JavaScript代码:
```javascript
var box = document.getElementById("box");
var left = 100; // 初始位置left
var top = 100; // 初始位置top
// 监听键盘按下事件
document.addEventListener("keydown", function(event) {
// 上移
if (event.keyCode == 38) {
top -= 5; // 每次向上移动5像素
box.style.top = top + "px"; // 改变元素top属性
}
// 下移
else if (event.keyCode == 40) {
top += 5; // 每次向下移动5像素
box.style.top = top + "px"; // 改变元素top属性
}
});
setInterval(function() {
left += 5; // 每次向右移动5像素
box.style.left = left + "px"; // 改变元素left属性
}, 50); // 每50毫秒执行一次移动
```
通过以上代码,我们给文档添加了键盘按下事件的监听,当用户按下上箭头键时,DIV元素会向上移动;当用户按下下箭头键时,DIV元素会向下移动。同时,我们还保留了原来的每50毫秒向右移动5像素的代码,从而实现了一个复合动画效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)