1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. #div1{
  8.     height:100px;
  9.     width:100px;
  10.     background:red;
  11.     position:absolute;
  12.     }
  13. </style>
  14. <script>
  15. window.onload = function ()
  16. {
  17.     var odiv = document.getElementById('div1');
  18.     var key = { l:null,t:null,r:null,b:null};
  19.  
  20.     setInterval(function ()
  21.     {
  22.         if(key.l)
  23.         odiv.style.left = odiv.offsetLeft +  - 10 + 'px';
  24.         if(key.t)
  25.         odiv.style.top = odiv.offsetTop - 10 + 'px';
  26.         if(key.r)
  27.         odiv.style.left = odiv.offsetLeft + 10 + 'px';
  28.         if(key.b)
  29.         odiv.style.top = odiv.offsetTop + 10 + 'px';
  30.     },50)
  31.  
  32.     document.onkeydown = function (ev)
  33.     {
  34.  
  35.         var ev = ev || event;
  36.         switch(ev.keyCode)
  37.         {
  38.             case 37 :
  39.             key.l = true;
  40.             break;
  41.             case 38 :
  42.             key.t = true;
  43.             break;
  44.             case 39 :
  45.             key.r = true;
  46.             break;
  47.             case 40 :
  48.             key.b = true;
  49.             break;
  50.         }
  51.     }
  52.  
  53.     document.onkeyup = function (ev)
  54.     {
  55.         var ev = ev || event;
  56.         switch(ev.keyCode)
  57.         {
  58.             case 37 :
  59.             key.l = false;
  60.             break;
  61.             case 38 :
  62.             key.t = false;
  63.             break;
  64.             case 39 :
  65.             key.r = false;
  66.             break;
  67.             case 40 :
  68.             key.b = false;
  69.             break;
  70.         }
  71.     }
  72.  
  73. }
  74. </script>
  75. </head>
  76.  
  77. <body>
  78. <div id="div1"></div>
  79. </body>
  80. </html>

dom div移动解决停顿问题的更多相关文章

  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. 键盘控制div移动并且解决停顿问题（原生js）

    <html> <head> <title>键盘控制div移动,解决停顿问题</title> <meta charset="utf-8&q ...

  3. DIV+CSS解决IE6，IE7，IE8，FF兼容问题

    1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了:1. <metahttp-equivmetahttp-equiv ...

  4. DIV+CSS解决IE6，IE7，IE8，FF兼容问题(转至http://www.douban.com/note/163291324/)

    2011-07-25 21:11:47     DIV+CSS解决IE6,IE7,IE8,FF兼容问题 1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE ...

  5. org/w3c/dom/ElementTraversal 错误解决办法

    org/w3c/dom/ElementTraversal 错误解决办法 不记得之前几天把什么maven依赖包删除了,今天利用htmlunit运行代码的时候报了下面的错误: Exception in t ...

  6. div错位/解决IE6、IE7、IE8样式不兼容问题

    IE6里DIV错位的问题    原文:chinafine 采用”FLOAT:LEFT“的DIV在IE8.IE7.都没问题,IE6下却向下移动,出现空白.这是因为,IE6采用的内核默认把DIV之间的距离 ...

  7. Html-Css-div标签嵌套浮动div标签时无法撑开外部div的解决

    当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的 当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的,也就是说DIV2在这里相当于浮在 ...

  8. css+div如何解决文字溢出

    看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...

  9. div错位解决IE6、IE7、IE8样式不兼容问题

    IE6里DIV错位的问题       采用”FLOAT:LEFT“的DIV在IE8.IE7.都没问题,IE6下却向下移动,出现空白.这是因为,IE6采用的内核默认把DIV之间的距离增加了3~5个PX, ...

随机推荐

  1. task判断任务是否存在

    tasklist|find /i "qq.exe" ||exit taskkill /im qq.exe /f

  2. 使用jQuery插件PrintArea进行html页面打印

    在开发系统时,我们一般会有统计分析的功能需求,而现在大多数系统都是使用B/S的形式开发. 所以,html报表打印,并且打印指定内容,成了必要的功能. 开源地址:https://github.com/R ...

  3. Spring事务报Connection is read-only

    昨天做项目时,写了个方法,程序突然报了Connection is readonly. Queries leading to data modification are not allowed调了程序半 ...

  4. 51nod1201 整数划分

    01背包显然超时.然后就是一道神dp了.dp[i][j]表示j个数组成i的方案数.O(nsqrt(n)) #include<cstdio> #include<cstring> ...

  5. sql的 group by 分组;linq的 group by 分组

    先来看看 linq的,下面的一段linq 是 ,在 学生导入数据的时候,我们根据学生的手机号码和学生名称进行分组,如果有重复的,我们就筛选出来,用到了 linq的 group by,注意这里是new出 ...

  6. Linux kernel scriptes bin2c "\x"

    /**************************************************************************** * Linux kernel scripte ...

  7. HDU 3573 Buy Sticks （逻辑）

    题意:a,b,c三种棍子长度分别为20,28,32,现需要这三种棍子数根,欲买长为75的棍子来剪成这三种(不够长的就废弃) ,问需要买多少根. 思路:将所有棍子尽可能和其他搭配起来,使得数量减到最少. ...

  8. QCon 2015 阅读笔记 - 团队建设

    QCon 2015阅读笔记 QCon 2015 阅读笔记 - 移动开发最佳实践 QCon 2015 阅读笔记 - 团队建设 中西对话:团队管理的五项理论和实战 - 谢欣.董飞(今日头条,LinkedI ...

  9. android中handler用法总结

    一.Handler的定义: Handler主要接收子线程发送的数据, 并用此数据配合主线程更新UI,用来跟UI主线程交互用.比如可以用handler发送一个message,然后在handler的线程中 ...

  10. EL&struts2标签 读取map,list集合

    struts中的取map和list & jsp中取map和list <% List list = new ArrayList(); list.add("a"); li ...