<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#div1{

    height:100px;

    width:100px;

    background:red;

    position:absolute;

    }

</style>

<script>

window.onload = function ()

{

    var odiv = document.getElementById('div1');

    var key = { l:null,t:null,r:null,b:null};

    setInterval(function ()

    {

        if(key.l)

        odiv.style.left = odiv.offsetLeft +  - 10 + 'px';

        if(key.t)

        odiv.style.top = odiv.offsetTop - 10 + 'px';

        if(key.r)

        odiv.style.left = odiv.offsetLeft + 10 + 'px';

        if(key.b)

        odiv.style.top = odiv.offsetTop + 10 + 'px';

    },50)

    document.onkeydown = function (ev)

    {

        var ev = ev || event;

        switch(ev.keyCode)

        {

            case 37 :

            key.l = true;

            break;

            case 38 :

            key.t = true;

            break;

            case 39 :

            key.r = true;

            break;

            case 40 :

            key.b = true;

            break;

        }

    }

    document.onkeyup = function (ev)

    {

        var ev = ev || event;

        switch(ev.keyCode)

        {

            case 37 :

            key.l = false;

            break;

            case 38 :

            key.t = false;

            break;

            case 39 :

            key.r = false;

            break;

            case 40 :

            key.b = false;

            break;

        }

    }

}

</script>

</head>

<body>

<div id="div1"></div>

</body>

</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. Objective-C 类的继承、方法的重写和重载

    一.类的继承 Objective-c中类的继承与C++类似,不同的是Objective-c不支持多重继承,一个类只能有一个父类,单继承使Objective-c的继承关系很简单,易于管理程序.Objec ...

  2. pl/sql programming 02 创建并运行plsql代码

    /* * chap 02 * ------------------------------------------------- */ create or replace function wordc ...

  3. UTC的相互转换(java)

      SimpleDateFormat foo = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss"); System.out.println(& ...

  4. npm和bower

    npm用于管理node.js 的backend依赖模块:这些模块以node的require来调用 bower用于管理frontend的js依赖模块,这些模块用<script src=" ...

  5. poj 1465 Multiple（bfs+余数判重）

    题意:给出m个数字,要求组合成能够被n整除的最小十进制数. 分析:用到了余数判重,在这里我详细的解释了.其它就没有什么了. #include<cstdio> #include<cma ...

  6. opengl截图

    int GetEncoderClsid(const WCHAR* format, CLSID* pClsid) { UINT num = ; // number of image encoders U ...

  7. HDU 5003 Osu!

    解题思路:水题,不多说. #include<cstdio> #include<cstring> #include<algorithm> #include<cm ...

  8. win32 API 学习

    SendMessage 函数原型 LRESULT SendMessage(HWND hWnd,UINT Msg,WPARAM wParam,LPARAM IParam) 详情:百度百科     msd ...

  9. 湖大 11404 manacher

    链接   http://acm.hunnu.edu.cn/online/?action=problem&type=show&id=11404&courseid=0 求 最长回文 ...

  10. 转深入学习heritrix---体系结构（Overview of the crawler）

    Heritrix采用了模块化的设计,它由一些核心类(core classes)和可插件模块(pluggable modules)构成.核心类可以配置,但不能被覆盖,插件模块可以被由第三方模块取代. ( ...