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. HDU 2819 — Swap 二分匹配

    Swap Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  2. 前端调试效率低？试试这10个“Chrome开发者工具”使用技巧

    摘要:今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试,优化页面渲染速度等.希望能提升Web开发人员的工作效率. 今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试, ...

  3. 解决treeview未选中时，默认选中首个根节点的问题！

    private void treeView1_MouseUp(object sender, MouseEventArgs e) { TreeNode selectnode = this.treeVie ...

  4. 【HTML5】拖放（Drag 和 drop）

    效果图: <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 { ...

  5. JavaScript案例七：简单生成表格

    JavaScript简单生成表格,巩固基础知识点... <!DOCTYPE html> <html> <head> <title>JavaScript简 ...

  6. mvc-5视图和模版

    动态渲染视图 当待渲染的视图内容不多的时候,可以将视图元素放在控制器或者状态里 var views = document.getElementById("views"); view ...

  7. 暴力 hihoCoder 1251 Today Is a Rainy Day (15北京C)

    题目传送门 题意:一串数字变成另一串数字,可以单个数字转变,或者一类数字转变,问最少操作次数 分析:首先一类转换比单个转换优,先枚举找出最优的映射方案,然后将零碎的操作加上.6位6进制表示map映射, ...

  8. UVa1401 Remember the Word（DP+Trie树）

    题目给定一个字符串集合有几种方式拼成一个字符串. dp[i]表示stri...strlen-1的方案数 dp[len]=1 dp[i]=∑dp[j](stri...strj-1∈SET) 用集合的字符 ...

  9. POJ1523 SPF（割点模板）

    题目求一个无向图的所有割点,并输出删除这些割点后形成几个连通分量.用Tarjan算法: 一遍DFS,构造出一颗深度优先生成树,在原无向图中边分成了两种:树边(生成树上的边)和反祖边(非生成树上的边). ...

  10. 设置完在Canvas的位置后，控件HitTest不响应的问题

    have a Canvas with a couple of elements on it like Line, Path and Text Box. In the MouseOver event o ...