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. How to: Synchronize Files by Using Managed Code

    The examples in this topic focus on the following Sync Framework types: FileSyncProvider FileSyncOpt ...

  2. JavaScript中typeof知多少?

    typeof运算符介 绍:typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型.它返回值是一个字符串,该字符串说明运算数的类型. 你 知道下面typeof运算的结果吗? typeof ...

  3. Android应用更新升级实现

    介绍 在产品的开发中,android升级提示,下载更新是必备的功能,否则等用户被动去官方网,或者第三方商店提示,就为时已晚了. 原理 在用户每次打开应用的时候,都与服务器进行一次交互,获取版本信息,对 ...

  4. UVa 644 Immediate Decodability

    吐槽下我的渣渣英语啊,即使叫谷歌翻译也没有看懂,最后还是自己读了好几遍题才读懂. 题目大意:题意很简单,就是给一些互不相同的由'0','1'组成的字符串,看看有没有一个字符串是否会成为另一个的开头的子 ...

  5. HDU 1024 (不重叠m段最大和) Max Sum Plus Plus

    题解是看的这里的: http://www.acmerblog.com/hdu-1024-Max-Sum-Plus-Plus-1276.html 当前这个状态是dp[i][j],i 表示当前的段,j表示 ...

  6. ubuntu下实现openerp 7使用nginx反正代理及绑定域名

    这里要记录一个nginx upstream实现反向代理的配置过程. 连接vps的ssh. 先安装nginx sudo apt-get install nginx 修改/etc/nginx/nginx. ...

  7. OC 设计模式——单例模式

    单例模式的作用:可以保证在程序运行过程,一个类只有一个实例,而且这个实例易于供外界访问.永远只分配一次内存给这个类.由于在调用alloc方法的时候,都会调用allocWithZone,所以要重写这个方 ...

  8. HDU 3666 THE MATRIX PROBLEM (差分约束,最短路)

    题意: 给一个n*m矩阵,每个格子上有一个数字a[i][j],给定L和U,问:是否有这样两个序列{a1...an}和{b1...bn},满足 L<=a[i][j]*ai/bj<=U .若存 ...

  9. yaf框架流程三

    路由的原理请看http://yaf.laruence.com/manual/yaf.routes.html这个链接 要点:路由的顺序是堆栈模式的,及最后添加的路由规则最优先.由上两篇可知,定义的第一条 ...

  10. 定时组件quartz系列<一>模拟定时组件小程序

    一.核心概念 Quartz的原理不是很复杂,只要搞明白几个概念,然后知道如何去启动和关闭一个调度程序即可. 1.Job表示一个工作,要执行的具体内容.此接口中只有一个方法void execute(Jo ...