js 键盘移动div、img对象

js 键盘移动div、img对象

 <html>
 <script type="text/javascript">

  var EXtype="";
  var len=5; //步长
  var level=1;//变速倍数
  var sprite;//div img 或者sprite，移动目标

   //检测浏览器版本 函数
  function getExplorerVersion(){

     var Sys = {};//js 所谓的面向对象 对象
         var ua = navigator.userAgent.toLowerCase();
         if (window.ActiveXObject)
             Sys.ie = ua.match(/msie ([\d.]+)/)[1];
         else if (document.getBoxObjectFor)
             Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1];
         else if (window.MessageEvent && !document.getBoxObjectFor)
             Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1];
         else if (window.opera)
             Sys.opera = ua.match(/opera.([\d.]+)/)[1];
         else if (window.openDatabase)
             Sys.safari = ua.match(/version\/([\d.]+)/)[1];

         if(Sys.ie){ document.write('IE: '+Sys.ie);
         EXtype="IE";
          }
         if(Sys.firefox){ document.write('Firefox: '+Sys.firefox);
         EXtype="Firefox";
         }
         if(Sys.chrome){ document.write('Chrome: '+Sys.chrome);
         EXtype="Chrome";
         }
         if(Sys.opera){ document.write('Opera: '+Sys.opera);
         EXtype="Opera";
         }
         if(Sys.safari){ document.write('Safari: '+Sys.safari);
         EXtype="Safari";
         }

         return EXtype;
  }
  //检测浏览器版本
  getExplorerVersion();

 function onkeyEvent(e)
 {
    var kc="";

    if(EXtype=="IE"){    kc=window.event.keyCode; }
    else
    if(EXtype=="Chrome"){ kc= event.which; }

    step(kc);
  }
 //move
 function step(seq)
 {  

     switch(seq)
     {
      case 37:
       sprite.style.left = (parseInt(sprite.style.left) - speed(len)) + "px"; //left
       break;
      case 38:
       sprite.style.top = (parseInt(sprite.style.top) - speed(len)) + "px"; //up
       break;
      case 39:
        sprite.style.left = (parseInt(sprite.style.left) + speed(len)) + "px"; //right
       break;
      case 40:
       sprite.style.top = (parseInt(sprite.style.top) + speed(len)) + "px"; //down
       break;
     }
 }
 //变速
 function speed(level)
 {
  var steplenvar=len*level;
   return steplenvar;
 }
 //监听
 document.onkeydown =onkeyEvent; 

 function init(){
   sprite=document.getElementById("sprite");
 }
 //更换移动对象
 function clicksprite(e)
 {
    var choosediv=e;
    sprite=document.getElementById(choosediv);
 }
 </script>

 <body onload="init()">
          <div id="sprite" style="position:absolute; left:0px;top:0px;width:200px;height:100px;color:#000000;background-color:#ffff99;" onclick="clicksprite(this.id)"> </div>

           <div id="sprite1" style="position:absolute; left:100px;top:100px;width:200px;height:100px;color:#000000;background-color:#000fff;" onclick="clicksprite(this.id)"> </div>
 </body>
 </html>