码迷,mamicode.com
首页 > 移动开发 > 详细

键盘移动div

时间:2019-07-29 00:34:29      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:case   cas   按键   text   title   keycode   asc   ase   off   

 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

标签:case   cas   按键   text   title   keycode   asc   ase   off   

原文地址:https://www.cnblogs.com/zuiaimiusi/p/11261598.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!