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.          if(Sys.ie){ document.write('IE: '+Sys.ie);
  26.          EXtype="IE";
  27.           }
  28.          if(Sys.firefox){ document.write('Firefox: '+Sys.firefox);
  29.          EXtype="Firefox";
  30.          }
  31.          if(Sys.chrome){ document.write('Chrome: '+Sys.chrome);
  32.          EXtype="Chrome";
  33.          }
  34.          if(Sys.opera){ document.write('Opera: '+Sys.opera);
  35.          EXtype="Opera";
  36.          }
  37.          if(Sys.safari){ document.write('Safari: '+Sys.safari);
  38.          EXtype="Safari";
  39.          }
  40.  
  41.          return EXtype;
  42.   }
  43.   //检测浏览器版本
  44.   getExplorerVersion();
  45.  
  46.  function onkeyEvent(e)
  47.  {
  48.     var kc="";
  49.  
  50.     if(EXtype=="IE"){    kc=window.event.keyCode; }
  51.     else
  52.     if(EXtype=="Chrome"){ kc= event.which; }
  53.  
  54.     step(kc);
  55.   }
  56.  //move
  57.  function step(seq)
  58.  {  
  59.  
  60.      switch(seq)
  61.      {
  62.       case 37:
  63.        sprite.style.left = (parseInt(sprite.style.left) - speed(len)) + "px"; //left
  64.        break;
  65.       case 38:
  66.        sprite.style.top = (parseInt(sprite.style.top) - speed(len)) + "px"; //up
  67.        break;
  68.       case 39:
  69.         sprite.style.left = (parseInt(sprite.style.left) + speed(len)) + "px"; //right
  70.        break;
  71.       case 40:
  72.        sprite.style.top = (parseInt(sprite.style.top) + speed(len)) + "px"; //down
  73.        break;
  74.      }
  75.  }
  76.  //变速
  77.  function speed(level)
  78.  {
  79.   var steplenvar=len*level;
  80.    return steplenvar;
  81.  }
  82.  //监听
  83.  document.onkeydown =onkeyEvent; 
  84.  
  85.  function init(){
  86.    sprite=document.getElementById("sprite");
  87.  }
  88.  //更换移动对象
  89.  function clicksprite(e)
  90.  {
  91.     var choosediv=e;
  92.     sprite=document.getElementById(choosediv);
  93.  }
  94.  </script>
  95.  
  96.  <body onload="init()">
  97.           <div id="sprite" style="position:absolute; left:0px;top:0px;width:200px;height:100px;color:#000000;background-color:#ffff99;" onclick="clicksprite(this.id)"> </div>
  98.  
  99.            <div id="sprite1" style="position:absolute; left:100px;top:100px;width:200px;height:100px;color:#000000;background-color:#000fff;" onclick="clicksprite(this.id)"> </div>
  100.  </body>
  101.  </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. loj 1013(LCS+记忆化搜索)

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=25839 思路:第一小问可以很快求出了,两个字符串的长度-LCS,然 ...

  2. org.apache.log4j与org.apache.commons.logging这两个包有什么区别

    apache common logging是一种log的框架接口,它本身并不实现log记录的功能,而是在运行时动态查找目前存在的日志库,调用相关的日志函数,从而隐藏具体的日志实现log4j是具体的日志 ...

  3. 几种php 删除数组元素方法

    几种php教程 删除数组元素方法在很多情况下我们的数组会出现重复情况,那我们删除数组中一些重复的内容怎么办,这些元素我必须保持他唯一,所以就想办法来删除它们,下面利用了遍历查询来删除重复数组元素的几种 ...

  4. cocos 帧率测试

    有人说导致cocos2dx 帧率下降的是getPosition,我测试以后发现并不是这样的. local MainScene = class("MainScene", functi ...

  5. POJ 1064 (二分)

    题目链接: http://poj.org/problem?id=1064 题目大意:一堆棍子可以截取,问要求最后给出K根等长棍子,求每根棍子的最大长度.保留2位小数.如果小于0.01,则输出0.00 ...

  6. const放在函数前和放在函数后

    template < class T, class container = vector<T> > class MyClass{ private: T value; publi ...

  7. fireBug使用指南

    据说,对于网页开发人员来说,Firebug是Firefox浏览器中最好的插件之一. 我最近就在学习怎么使用Firebug,网上找到一篇针对初学者的教程,感觉比较有用,就翻译了出来. ========= ...

  8. maven工程代码关联源代码配置

    最近在学习dubbo,在maven构建完成后,需要关联查看一些依赖jar的源码,配置很简单,如下: 勾选windows-Preferences-Maven- Download Artifact Sou ...

  9. gdb使用笔记

    相关编译选项: 1．-g 开启gdb 2．-o0,o2  o0表示不优化, 3． -funsigned-char -fdata-sections 会使compiler为每个function和data ...

  10. FLTK 1.1.10 VS2010 Configuration 配置

    Download FLTK 1.1.10 at here. Download VS2010 Download CMake 2.8.12 I assume you've already installe ...