<!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. mtk Android 编译命令自定义--添加版本号

    1. alps\build\core\Makefile文件:(参照CUSTOM_BUILD_VERNO) ifeq "" "$(SURPLUS_BUILD_VERNO)& ...

  2. Mysql中的Prepared Statement与Stored Precedure学习

    可以参考: http://stackoverflow.com/questions/196652/prepared-statement-vs-stored-procedure They are not ...

  3. Toast报错 android.content.res.Resources$NotFoundException

    Toast.makeText(getActivity(), String.valueOf(position), Toast.LENGTH_SHORT)                         ...

  4. UTC的相互转换(java)

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

  5. JSP:include的flush属性的作用

    JSP 中include 另一个文件时有个很偏的属性,叫flush,默认为 false.   在同一个 JSP 中,如果不断 include 自己(源文件),在逻辑上会形成死循环.若默认情况下,服务器 ...

  6. HDU 2084 数塔

    没什么好说的,这是我学DP的第一道题目. //#define LOCAL #include <iostream> #include <cstdio> #include < ...

  7. Drawable和Bitmap的区别

    Bitmap - 称作位图,一般位图的文件格式后缀为bmp,当然编码器也有很多如RGB565.RGB888.作为一种逐像素的显示对象执行效率高,但是缺点也很明显存储效率低.我们理解为一种存储对象比较好 ...

  8. （转载）C语言 数组与指针的区别

    1) 字符串指针变量是个变量,指向字符串的首地址:而字符串数组名是个常量,为字符串数组第一个元素的地址: 2)字符串指针变量可以赋值,而字符串数组名不能赋值:对于字符数组只能对各个元素赋值,不能用以下 ...

  9. Android Studio 学习 - 程序安装

    痛定思痛,从今天开始专心学习AndriodStudio.希望以此为契机,把Java学扎实.更希望自己能坚持下去,不要半途而废. 记录一些日常的工作以及碰到的问题,权当勉励自己.荀子曰:吾尝终日而思矣, ...

  10. Linux/Unix shell 自动发送AWR report(二)

    观察Oracle数据库性能,Oracle自带的awr 功能为我们提供了一个近乎完美的解决方案,通过awr特性我们可以随时从数据库提取awr报告.不过awrrpt.sql脚本执行时需要我们提供一些交互信 ...