<!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. Open_Newtonsoft_Json 的序列化和反序列化

    Newtonsoft.Json,一款.NET中开源的Json序列化和反序列化类库(下载地址http://json.codeplex.com/). 特别注明:本人转自 陈 晨 博客园的 Newtonso ...

  2. What a version number means

    http://stackoverflow.com/questions/3768261/best-practices-guidance-for-maintaining-assembly-version- ...

  3. HibernateTools实现pojo类 数据库schma mapping映射的相互转换

    核心 利用HibernateTools,从POJO类,Mapping映射文件,数据库表有其中的一项,就能生成其他两项. 概述 在使用Hibernate开发系统持久层时,按照一般开发流程 1.分析业务 ...

  4. 实现JavaScript中继承的三种方式

    在JavaScript中,继承可以通过三种手法实现原型链继承 使用apply.call方法 对象实例间的继承.     一.原型链继承 在原型链继承方面,JavaScript与java.c#等语言类似 ...

  5. 我的Linux书架

    原文地址www.cnblogs.com/wwang/archive/2011/01/27/1944406.html 工作几年来,一直从事Linux内核驱动方面的开发.从接触Linux到现在,读过不少L ...

  6. git subtree有效管理公共第三方lib

    如果你的项目中有很多第三方的lib,你希望使用它,并且也希望可能对该lib做修改并且贡献到原始的项目中去,或者你的项目希望模块化,分为几个repo单独维护,那么git subtree就是一个选择.gi ...

  7. UVa 10474 Where is the Marble

    题意:给出一列数,先排序,再查找学习了sort函数,lower_bound函数sort:可以给任意对象排序(包括自己定义的)(前提是定义好了‘<’运算符)lower_bound:查找大于或者等于 ...

  8. 连接mongo的服务提示：HTTP Status 500 - com.mongodb.MongoException$Network: can't call something

    连接mongo的服务提示以下错误 原因:达到了mongodb启动时预设的最大连接数,无法创建新的连接 HTTP Status 500 - com.mongodb.MongoException$Netw ...

  9. 增加eclipse启动的Tomcat内存的

    JAVA程序启动时JVM都会分配一个初始内存和最大内存给这个应用程序.这个初始内存和最大内存在一定程度都会影响程序的性能. 如何设置Tomcat的JVM内存大小 Tomcat本身不能直接在计算机上运行 ...

  10. Hadoop学习总结之五：Hadoop的运行痕迹

    Hadoop学习总结之五:Hadoop的运行痕迹   Hadoop 学习总结之一:HDFS简介 Hadoop学习总结之二:HDFS读写过程解析 Hadoop学习总结之三:Map-Reduce入门 Ha ...