<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. python小练习：读入一个考试得分，判断这个分数是哪个等级，并输出，考虑异常场景

    读入一个考试得分,判断这个分数是哪个等级,并输出. 等级:>=90 优 ,>=80且小于90 良,>=70 且小于80,中,>=60且<70及格  <60 不及格 ...

  2. java == 与 equals 相同与不同点

    java中与很多有意思又值得深究的点. 写这篇文章呢,是由于在百度知道中看到一个问题:怎样比较两个对象是否相同.这又使我想到了另外一个问题,== 和 equals有什么不同?写了几行代码,看了几篇文章 ...

  3. linux 系统监控和进程管理

    1.命令top,查看cpu和内存使用,主要进程列表和占用资源. 2.内存使用命令foree -g 3.查询所有java进程:pgrep -l java     ------ps aux|grep .j ...

  4. linux 3

    -- Linux -- 开心的一天 vi    所有的 unix like 系统都会内置 vi 文本编辑器 vim 较多使用的,可以主动的以字体颜色辨别语法的正确性,方便程序设计 vi/vim 的使用 ...

  5. bzoj4443 小凸玩矩阵

    题目链接 二分+最大check #include<algorithm> #include<iostream> #include<cstdlib> #include& ...

  6. 前端框架VUE----babel

    这个是解析我们es6的代码的,为什么要用它呢,因为对于一些ie浏览器,甚至FF浏览器,低版本的还不能识别我们的es6代码,那么vue里面好多还让我们去写es6的代码,这个时候我们就可以用babel这个 ...

  7. sql语句查询排序

    一:sql语句单词意义 order by 是用在where条件之后,用来对查询结果进行排序 order by 字段名 asc/desc asc 表示升序(默认为asc,可以省略) desc表示降序 o ...

  8. Docker学习笔记之保存和共享镜像

    0x00 概述 让 Docker 引以为傲的是它能够实现相比于其他虚拟化软件更快的环境迁移和部署,在这件事情上,轻量级的容器和镜像结构的设计无疑发挥了巨大的作用.通过将容器打包成镜像,再利用体积远小于 ...

  9. Linux指令之netstat

    查看某个端口的连接数 netstat -nat | grep -iw "8463" | wc -l [Mac&Redhat通用] 查看连接状况 netstat -nat | ...

  10. 01：CENTOS使用VIRTUALENV搭建独立的PYTHON环境-PYTHON虚拟环境

    1.1 安装virtualenv环境 https://www.cnblogs.com/liuyansheng/p/6141197.html 1.安装virtualenv yum install pyt ...