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. POJ 2778 DNA Sequence（AC自动机+矩阵加速）

    DNA Sequence Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9899   Accepted: 3717 Desc ...

  2. 在MongoDB中使用JOIN操作

    SQL与NoSQL最大的不同之一就是不支持JOIN,在传统的数据库中,SQL JOIN子句允许你使用普通的字段,在两个或者是更多表中的组合表中的每行数据.例如,如果你有表books和publisher ...

  3. 小甲鱼PE详解之区块描述、对齐值以及RVA详解（PE详解06）

    各种区块的描述: 很多朋友喜欢听小甲鱼的PE详解,因为他们觉得课堂上老师讲解的都是略略带过,绕得大家云里雾里~刚好小甲鱼文采也没课堂上的教授讲的那么好,只能以比较通俗的话语来给大家描述~ 通常,区块中 ...

  4. 10688 XYM-AC之路

    Description 在华农的众ACMers中,有着一位家喻户晓.人称一鸣惊人的DP神牛—XYM.由于XYM太出名了,他的仰慕者决定给XYM写一部个人传奇以传承他光辉的AC之路. 为了使故事更加真实 ...

  5. LightOJ1013 Love Calculator（DP）

    容易猜测到包含s1.s2序列的串的最短长度是LCS(s1,s2) + ( len(s1) - LCS(s1,s2) ) + ( len(s2) - LCS(s1,s2) ) ,即: len(s1)+l ...

  6. hilbert

    hilbert 难度级别: A: 编程语言:不限:运行时间限制:1000ms: 运行空间限制:131072KB: 代码长度限制:102400B 试题描述 图1为1阶Hilbert曲线,它由3条长度为1 ...

  7. X.509证书_生成X.509协议的证书

    用法:1. 用NOTE打开,修改按实际情况脚本中的(1)~ (6)处参数2. 找一台含JVM环境的WIN机器3. 双击执行后,会生成一对密钥4. 请确保当前使用的JDK版本为6.0!!! @echo ...

  8. DOS命令下输入：java Hello 出现以下几种结果可能的原因：

    DOS命令下输入:java Hello 出现以下结果:Bad command or the file name 没有这个命令或文件名 原因可能是没有成功安装jdk或者没有配置好jdk 的环境变量,或者 ...

  9. react-amazeui-touch 妹子Ui移动端学习

    必须先配置并且学习react环境: http://www.cnblogs.com/CyLee/p/5668373.html 官方地址 http://t.amazeui.org/#/docs/form? ...

  10. Eclipse中部署hadoop2.3.0

    1 eclipse中hadoop环境部署概览 eclipse 中部署hadoop包括两大部分:hdfs环境部署和mapreduce任务执行环境部署.一般hdfs环境部署比较简单,部署后就 可以在ecl ...