<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. IDEA相关知识整理

    一.离线下载插件[也可以通过代理的方式下载插件] http://plugins.jetbrains.com/ 下载离线插件 settings -> plugins -> install p ...

  2. 原生JavaScript插件编写指南（转载）

    原生js开发指南 https://www.jianshu.com/p/e65c246beac1 在jQuery大量使用的环境下,目前网上的众多jQuery插件也能基本满足要求,但是在项目具体需求下,有 ...

  3. spring boot 概念

    最近新版本迭代,一直在弄框架替换和新技术实现的事儿. 本来想仔细介绍一下Spring Boot的各种东西,后来发现没啥写的,Spring Boot 说白了就是把你开发过程中用到的各种框架给你封装了一下 ...

  4. SQL Server 2012中的AlwaysOn尝试

      简介 SQL Server2012中新增的AlwaysOn是一个新增高可用性解决方案.在AlwaysOn之前,SQL Server已经有的高可用性和数据恢复方案,比如数据库镜像,日志传送和故障转移 ...

  5. The Little Prince-12/04

    The Little Prince-12/04 The wheat fields have nothing to say to me. And that is sad. But you have ha ...

  6. 怎样从外网访问内网php-fpm？

    本地安装了一个php-fpm,只能在局域网内访问,怎样从外网也能访问到本地的php-fpm呢?本文将介绍具体的实现步骤. 准备工作 安装并启动php-fpm 默认安装的php-fpm端口是9000. ...

  7. php 获取今日、昨日、上周、本周、本月、上月、今年的起始时间戳和结束时间戳的方法

    //php获取今日开始时间戳和结束时间戳 $beginToday=mktime(0,0,0,date('m'),date('d'),date('Y')); $endToday=mktime(0,0,0 ...

  8. SVN如何将版本库url访问地址中的https改为http

    1.选择控制台树中的根节点,右键选择“属性”. 2.切换至面板“网络”. 3.取消勾选项“使用安全连接协议(https://)”.

  9. curl 抓取图片

    /** * curl 抓取图片 * @param $url * @return mixed */ public static function downLoadImage($url) { $heade ...

  10. Windbg解决系统蓝屏

    win10企业版连续两天遭遇系统蓝屏, 今天就各种检查,准备好好地研究一下这个问题,以下是整个过程: 首先,找到系统蓝屏时的错误日志: [计算机] --> [管理] --> [系统工具] ...