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. 网站构建学习笔记（0）——基本概念了解及资源学习（copy自w3school）

    一.学习方面 1.WWW - 万维网 什么是 WWW? WWW 指万维网(World Wide Web) 万维网常被称为Web Web 是由遍布全球的计算机所组成的网络 所有 Web 中的计算机都可以 ...

  2. cocos2dx游戏开发——微信打飞机学习笔记（七）——Enemy的搭建

    一.文件创建~ Enemy.h Enemy.cpp 二.How to do? 由于我是已经完成成个游戏的功能,所以我会将游戏中enemy所需要的很多功能基本上都先考虑到了,如果大家自己在做的时候也许没 ...

  3. P,V操作实例分析

    刚开始学习操作系统的时候,就听说PV操作,简单说说PV操作. ●  P(S): S=S-1 如果S≥0,则该进程继续执行:               S<0,进程暂停执行,放入信号量的等待队列 ...

  4. Hark的数据结构与算法练习之煎饼排序

    算法说明 假设煎锅里边有N个煎饼摞在了一起,它们大小不一并且顺序不一致,我们需要通过拿铲子将它们不停的翻个,进行排序,最终得到一个底下是大的煎饼,上边是小的煎饼的序列.这个排序的过程就是煎饼排序. 这 ...

  5. finally 语句

    package unit5; public class FinallyDemo { int no1,no2; public FinallyDemo(String[] args) { try{ no1= ...

  6. 金子上的友情[XDU1011]

    Problem 1011 - 金子上的友情 Time Limit: 1000MS   Memory Limit: 65536KB   Difficulty: Total Submit: 336  Ac ...

  7. BZOJ3867 : Nice boat

    每个点最多被修改$O(\log n)$次,线段树记录区间最值暴力更新. #include<cstdio> #define N 262145 int T,n,m,i,op,c,d,p,s[N ...

  8. cSS3 伪类:nth-child 的使用方法

    :nth-child是一个非常牛逼的伪类,如果你能很好的理解它就可以用CSS 做出很多非常实用的效果.当我很年轻的时候还使用PHP的i++来实现一些东西,其实CSS 完全可以实现.下面是我总结的一些用 ...

  9. 【POJ】2828 Buy Tickets（线段树+特殊的技巧/splay）

    http://poj.org/problem?id=2828 一开始敲了个splay,直接模拟. tle了.. 常数太大.. 好吧,说是用线段树.. 而且思想很拽.. (貌似很久以前写过貌似的,,) ...

  10. Java_BigDecimal类型比较大小

    这个类是java里精确计算的类 1 比较对象是否相等 一般的对象用equals,但是BigDecimal比较特殊,举个例子: BigDecimal a=BigDecimal.valueOf(1.0); ...