<html>

<head>

<title>键盘控制div移动，解决停顿问题</title>

<meta charset="utf-8" />

<style type="text/css">

#div1{width:100px;height:100px;background:#ff0000;position:absolute;}

</style>

<script type="text/javascript">

window.onload = function(){

    var oDiv = document.getElementById("div1");

    var timer = null;

    var left = false;

    var right = false;

    var top = false;

    var bottom = false;

    setInterval(function(){

        if(left){

            oDiv.style.left = oDiv.offsetLeft-10+"px";

        }else if(top){

            oDiv.style.top = oDiv.offsetTop-10+"px";

        }else if(right){

            oDiv.style.left = oDiv.offsetLeft+10+"px";

        }else if(bottom){

            oDiv.style.top = oDiv.offsetTop+10+"px";

        }

    },50);

    document.onkeydown = function(ev){

        var ev = ev || event;

        var keyCode = ev.keyCode;

        switch(keyCode){

           case 37: left = true;break;

           case 38: top = true;break;

           case 39: right = true;break;

           case 40: bottom = true;break;

        }

    }

    document.onkeyup = function(ev){

        var ev = ev || event;

        var keyCode = ev.keyCode;

        switch(keyCode){

           case 37: left = false;break;

           case 38: top = false;break;

           case 39: right = false;break;

           case 40: bottom = false;break;

        }

    }

}

</script>

</head>

<body>

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

</body>

</html>

键盘控制div移动并且解决停顿问题（原生js）的更多相关文章

  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移动

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  3. JS实现用键盘控制DIV上下左右+放大缩小与变色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 用键盘控制DIV && Div闪烁

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. html通过css,js实现div悬浮效果总汇，如原生JS实现滚动到一定位置实现div悬浮

    在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...

  6. js键盘控制DIV移动

    <style type="text/css"> html,body{overflow:hidden;}body{margin:0;padding:0;}pre{colo ...

  7. 键盘控制div上下左右移动 (转)

    <html> <head> <title></title> <link rel="stylesheet" type=" ...

  8. 控制DIV移动

    键盘控制DIV移动 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  9. 鼠标点击按钮控制图片移动或者键盘控制图片移动（解决问题：parseInt失效问题，用Number）

    在测试用鼠标点击按钮,使图片左右上下移动: 效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

  1. ref 参数与out参数

    变量作为参数传给方法,同时希望在方法执行完成后对参数,反应到变量上面.就需要用到ref和out这两个参数. ref参数:在 传入前必须先初始化 out参数:不需要做预先的处理

  2. go语言，golang学习笔记3 用命令下载框架报错问题解决 设置环境变量

    go语言,golang学习笔记3 用命令下载框架报错问题解决 设置环境变量 下载安装:go get github.com/astaxie/beego 首页 - beego: 简约 & 强大并存 ...

  3. PHP $_SERVER 及用户真实IP

    $_SERVER 是一个包含了诸如头信息(header).路径(path).以及脚本位置(script locations)等等信息的数组.这个数组中的项目由 Web 服务器创建.不能保证每个服务器都 ...

  4. CAN学习网站

    百度搜索:Controller Area Network http://www.esd-electronics-usa.com/Controller-Area-Network-CAN-Introduc ...

  5. 基于jquery 的dateRangePicker 和 My97DatePicker

    引入相应的date插件 <script type="text/javascript" src="../plugins/daterangepicker/moment. ...

  6. jboss的使用和安装

    1. 安装 1.1.软件安装 首先要安装JDK(仅仅安装JRE是不行的,因为JSP页面需要编译),最新的正式版是JDK1.4.2.然后把JBoss的压缩包解压到一个目录下,目录名一般是"Jb ...

  7. Django中程序中图片资源的路径问题（static文件夹的放置）

    步骤1:在settings.py文件的最后加上以下内容: STATIC_URL = '/static/'STATIC_ROOT = os.path.join(os.path.dirname(__fil ...

  8. 容器学习笔记之CentOS7安装Docker（安装指定版本的Docker，加速，卸载）

    0x00 概述 Docker从1.13版本之后采用时间线的方式作为版本号,分为社区版CE和企业版EE. 社区版是免费提供给个人开发者和小型团体使用的,企业版会提供额外的收费服务,比如经过官方测试认证过 ...

  9. 2016 icpc ECfinal && codeforcesgym101194

    一不小心惨变旅游队,不过上海的风景不错 顺带找其他队交流一下集训经验...或许可以成为选拔和集训16级的依据 A.直接模3就可以了,2^(3*n)%7=1 C.Mr. Panda and Strips ...

  10. powermock+mockito+testng 单元测试pom文件

    0:Supported versions PowerMock version 1.7.0 and upper has experimental support of Mockito 2. A lot ...