js 键盘移动div、img对象

浏览数：39 / 时间：2015年06月11日

js 键盘移动div、img对象

  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>