键盘移动
Posted caicaihong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了键盘移动相关的知识，希望对你有一定的参考价值。
/*
* 使div可以根据不同的方向键向不同的方向移动
* 按左键，div向左移
* 按右键，div向右移
* 37 左
* 38 右
* 39 上
* 40 下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background: red; position: absolute; } </style> <script type="text/javascript"> /* * 使div可以根据不同的方向键向不同的方向移动 * 按左键，div向左移 * 按右键，div向右移 * 37 左 * 38 右 * 39 上 * 40 下 */ window.onload = function(){ //为document绑定按键按下的事件 document.onkeydown = function(){ console.log(event.keyCode) event = event || window.event; switch(event.keyCode){ case 37: box1.style.left = box1.offsetLeft-10 +"px"; break; case 38: box1.style.left = box1.offsetLeft+10 +"px"; break; case 39: box1.style.top = box1.offsetTop-10 +"px"; break; case 40: box1.style.top = box1.offsetTop+10 +"px"; break; } } } </script> </head> <body> <div id="box1"> </div> </body> </html>
以上是关于键盘移动的主要内容，如果未能解决你的问题，请参考以下文章