首页使用js+css+html实现，按键移动div效果

使用js+css+html实现，按键移动div效果

时间: 2024-02-03 09:01:58 浏览: 140

好的，这里提供一个完整的 HTML、CSS 和 JavaScript 代码示例，可以实现通过按键移动 div 元素的效果： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>按键移动 div</title> <style> #myDiv { position: absolute; left: 50%; top: 50%; transform: translate(-25px, -25px); width: 50px; height: 50px; background-color: red; } </style> </head> <body> <div id="myDiv"></div> <script> var div = document.getElementById("myDiv"); var leftPos = 0; var topPos = 0; document.addEventListener("keydown", function(event) { if (event.keyCode === 37) { // 左箭头 leftPos -= 10; div.style.left = leftPos + "px"; } else if (event.keyCode === 38) { // 上箭头 topPos -= 10; div.style.top = topPos + "px"; } else if (event.keyCode === 39) { // 右箭头 leftPos += 10; div.style.left = leftPos + "px"; } else if (event.keyCode === 40) { // 下箭头 topPos += 10; div.style.top = topPos + "px"; } }); </script> </body> </html> ``` 这个示例中，我们首先在 HTML 中定义了一个宽高为 50px 的红色 div 元素，并利用 CSS 将其居中显示。然后，在 JavaScript 中监听键盘事件，根据按键的不同分别修改 div 元素的 left 和 top 属性值，从而实现元素的移动。你可以直接复制上述代码，将其保存为一个 HTML 文件，然后在浏览器中打开该文件，即可看到效果。希望这个示例对你有所帮助。

阅读全文