键盘移动div

Posted 2022-05-24 zuiaimiusi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了键盘移动div相关的知识，希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <script type="text/javascript">
 8 /*
 9 使div可以根据不同的方向键移动
10 按左键 向左移
11 按右键 向右移
12 按上键 向上移
13 按下键 向下移
14 */
15 window.onload=function()
16 
17   var box1=document.getElementById("box1");
18   //为document绑定一个按键按下的事件
19   document.onkeydown=function(event)
20    event=event||window.event;
21    //定义一个变量，来表示移动的速度 当用户ctrl以后，速度加快
22    var speed=10;
23    if(event.ctrlKey)
24    speed=500;
25    
26    var speed=10;
27    switch(event.keyCode)
28    case 37:
29    box1.style.left=box1.offsetLeft-speed+"px";
30    break;
31    case 39:
32    box1.style.left=box1.offsetLeft+speed+"px";
33    break;
34    case 38:
35    box1.style.top=box1.offsetTop-speed+"px";
36    break;
37    case 40:
38    box1.style.top=box1.offsetTop+speed+"px";
39    break;
40    
41   ;
42 ;
43   </script>
44 <style type="text/css">
45     #box1
46     width:100px;
47     height:100px;
48     background-color:red;
49     position:absolute;
50     
51 </style>
52 <body>
53 <div id="box1"></div>
54 </body>
55 </html>

以上是关于键盘移动div的主要内容，如果未能解决你的问题，请参考以下文章

页面上有一个div 100*100 颜色为黄色按键盘上下左右键可以操作div移动 ctrl+键盘上下键可以放大缩小 ctrl+键盘左右键可以随机变颜色