1 <html>
2 <script type="text/javascript">
3
4 var EXtype="";
5 var len=5; //步长
6 var level=1;//变速倍数
7 var sprite;//div img 或者sprite，移动目标
8
9 //检测浏览器版本 函数
10 function getExplorerVersion(){
11
12 var Sys = {};//js 所谓的面向对象 对象
13 var ua = navigator.userAgent.toLowerCase();
14 if (window.ActiveXObject)
15 Sys.ie = ua.match(/msie ([\d.]+)/)[1];
16 else if (document.getBoxObjectFor)
17 Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1];
18 else if (window.MessageEvent && !document.getBoxObjectFor)
19 Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1];
20 else if (window.opera)
21 Sys.opera = ua.match(/opera.([\d.]+)/)[1];
22 else if (window.openDatabase)
23 Sys.safari = ua.match(/version\/([\d.]+)/)[1];
24
25
26
27 if(Sys.ie){ document.write(‘IE: ‘+Sys.ie);
28 EXtype="IE";
29 }
30 if(Sys.firefox){ document.write(‘Firefox: ‘+Sys.firefox);
31 EXtype="Firefox";
32 }
33 if(Sys.chrome){ document.write(‘Chrome: ‘+Sys.chrome);
34 EXtype="Chrome";
35 }
36 if(Sys.opera){ document.write(‘Opera: ‘+Sys.opera);
37 EXtype="Opera";
38 }
39 if(Sys.safari){ document.write(‘Safari: ‘+Sys.safari);
40 EXtype="Safari";
41 }
42
43 return EXtype;
44 }
45 //检测浏览器版本
46 getExplorerVersion();
47
48
49 function onkeyEvent(e)
50 {
51 var kc="";
52
53 if(EXtype=="IE"){ kc=window.event.keyCode; }
54 else
55 if(EXtype=="Chrome"){ kc= event.which; }
56
57 step(kc);
58 }
59 //move
60 function step(seq)
61 {
62
63 switch(seq)
64 {
65 case 37:
66 sprite.style.left = (parseInt(sprite.style.left) - speed(len)) + "px"; //left
67 break;
68 case 38:
69 sprite.style.top = (parseInt(sprite.style.top) - speed(len)) + "px"; //up
70 break;
71 case 39:
72 sprite.style.left = (parseInt(sprite.style.left) + speed(len)) + "px"; //right
73 break;
74 case 40:
75 sprite.style.top = (parseInt(sprite.style.top) + speed(len)) + "px"; //down
76 break;
77 }
78 }
79 //变速
80 function speed(level)
81 {
82 var steplenvar=len*level;
83 return steplenvar;
84 }
85 //监听
86 document.onkeydown =onkeyEvent;
87
88 function init(){
89 sprite=document.getElementById("sprite");
90 }
91 //更换移动对象
92 function clicksprite(e)
93 {
94 var choosediv=e;
95 sprite=document.getElementById(choosediv);
96 }
97 </script>
98
99 <body onload="init()">
100 <div id="sprite" style="position:absolute; left:0px;top:0px;width:200px;height:100px;color:#000000;background-color:#ffff99;" onclick="clicksprite(this.id)"> </div>
101
102 <div id="sprite1" style="position:absolute; left:100px;top:100px;width:200px;height:100px;color:#000000;background-color:#000fff;" onclick="clicksprite(this.id)"> </div>
103 </body>
104 </html>
js 键盘移动div、img对象,布布扣,bubuko.com
时间： 2024-07-29 14:46:10