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>

js 键盘移动div、img对象的更多相关文章

  1. js键盘控制div移动，解决停顿问题

    问题版本代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <html> &l ...

  2. js键盘控制DIV移动

    <style type="text/css"> html,body{overflow:hidden;}body{margin:0;padding:0;}pre{colo ...

  3. JS实现用键盘控制DIV上下左右+放大缩小与变色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 键盘控制div移动并且解决停顿问题（原生js）

    <html> <head> <title>键盘控制div移动,解决停顿问题</title> <meta charset="utf-8&q ...

  5. JS键盘事件之键控Div

    自上次做的鼠标拖动Div之后,看到fgm.cc的例子,发现用键盘操控Div貌似也是十分有趣,这些DOM操作随着jquery的没落,虽然渐渐少用了,不过有些DOM操作还是必不可少的.现在是虽然数据为王( ...

  6. Js键盘事件全面控制，回车按键事件，键盘对应按键码，按键事件兼容各个浏览器。

    在网上查询的按键码如下: 一.键盘按键和键盘对应代码表:   字母按键码A <--------> 65 B <--------> 66 C <--------> 6 ...

  7. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  8. JS 学习（四）对象

    对象 在JS中,对象是数据(变量),拥有属性和方法. JS中所有事物都是对象:字符串.数字.数组.日期等. 对象是拥有属性和方法的特殊数据类型. 属性是与对象相关的值. 方法是能够在对象上执行的动作. ...

  9. JS搞基指南----延迟对象入门提高资料整理

    JavaScript的Deferred是比较高大上的东西,  主要的应用还是主ajax的应用,  因为JS和nodeJS这几年的普及,  前端的代码越来越多,  各种回调套回调再套回调实在太让人崩溃, ...

随机推荐

  1. cocos2dx游戏开发——微信打飞机学习笔记（十）——碰撞检测的搭建

    一.七说八说        大家都发现了= =,做了那么多,发现就是摆设,完全没有打飞机的感觉,没有实现碰撞的监测.比如说呢,子弹和敌机,玩家与敌机就是需要有碰撞检测的说,然后在这篇我想会很长很长的教 ...

  2. Centos 6.4 32位 gcc 升级(已验证)

    具体需要升级成什么版本自行下载https://gcc.gnu.org/ 本文升级为4.8.5 1.下载编译所需依赖库 cd gcc-4.8.5 ./contrib/download_prerequis ...

  3. JIT晚期(运行期)

    在部分的商用虚拟机(Sun HotSpot.IBM J9)中,Java程序最初是通过解释器(Interpreter)进行解释执行的,当虚拟机发现某个方法或代码块的运行特别频繁时,就会把这些代码认定为& ...

  4. Spring的profile属性

    使用示例 //注解方式 public class DataSourceConfig { @Bean @Profile("prod") public DataSource dataS ...

  5. Ready事件与Onload事件的区别

    这两种事件都是在页面文档加载时触发的,但Ready比onload先执行. 具体区别如下: 1.在Javascript中,通常使用window.onload方法. window.onload必须等到页面 ...

  6. WPF 碰撞检测

    have tested this, it worked, at least for me var x1 = Canvas.GetLeft(e1); var y1 = Canvas.GetTop(e1) ...

  7. reqSUB错误

    ---- ERROR ----    Error in dispatcher subroutine reqSUB: Invalid PAR(1): 0502 上面是用adams/ca加载一个汽车模型时 ...

  8. js html5推送 实例

    <!DOCTYPE html>   <html>   <head>   <title>Simple Webkit notification exampl ...

  9. 【wikioi】1004 四子连棋

    题目链接 算法:BFS //2014-02-05更新 *******************************2013-10-15******************************* ...

  10. java获取获得Timestamp类型的当前系统时间

    java获取取得Timestamp类型的当前系统时间java获取取得Timestamp类型的当前系统时间 格式:2010-11-04 16:19:42 方法1: Timestamp d = new T ...