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. codevs 2924 数独

     数独挑战 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codevs.cn/problem/2924/ Description “芬兰数学家因 ...

  2. gui_mainfcn(gui_State, varargin{:});是什么意思

    gui_mainfcn函数执行过程中,要调用各个控件的CreateFcn函数(也就是控件创建的函数)来创建控件.如果对控件的一些属性设置不对,则控件就没法创建,gui_mainfcn函数就不能正确执行 ...

  3. intersection

    用来找到两个rdd的交集,注意,最终的new rdd的分区数量取决于两个rdd中的最大分区数量. 测试一下: val data1 = sc.parallelize(1 to 20,1) val dat ...

  4. 数据挖掘十大经典算法[0]-K-Means算法

    K-Means算法的输入N,K和一个size为N的向量组vector.输出K个两两互不相交的向量组.其本质是将给定的向量组划分成K个类别,使得同类别的向量相似度比较大,而不同类别的向量之间的相似度较小 ...

  5. Photoshop: 机关单位公章

    机关单位公章的大小与机构的级别有关,级别越高的公章越大,一般直径在3.8-4.2cm,很少有用4.5cm或3.4cm的.但企业的公章一般都很大. 首先点击文件新建,新建一个500×500像素(像素大小 ...

  6. XCOJ 1102 (树形DP+背包)

    题目链接: http://xcacm.hfut.edu.cn/oj/problem.php?id=1102 题目大意:树上取点.父亲出现了,其儿子包括孙子...都不能出现.给定预算,问最大值. 解题思 ...

  7. 【BZOJ】1179: [Apio2009]Atm（tarjan+spfa）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1179 缩点建图... #include <cstdio> #include <cs ...

  8. 【wikioi】1403 新三国争霸（dp+kruskal）

    http://wikioi.com/problem/1403/ 一开始的确感觉和bzoj1003很像,不同的是这里还要求联通,求最小的边. 我们可以想到用最小生成树(为嘛我自己想不到呢..) 我们可以 ...

  9. COJ986 WZJ的数据结构（负十四）

    WZJ的数据结构(负十四) 难度级别:D: 运行时间限制:6000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 请你设计一个数据结构,完成以下功能: 给定一个大小 ...

  10. Ruby Hash与ActiveSupport’s HashWithIndifferentAccess对于key的区别

    Ruby Hash的key定义的时候是支持symbol或者string的,所以访问的时候只能是symbol或者string其中一种方式. 建议使用symbol定义Hash的key,因为symbol在R ...