<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. 以太坊智能合约介绍，Solidity介绍

    以太坊智能合约介绍,Solidity介绍 一个简单的智能合约 先从一个非常基础的例子开始,不用担心你现在还一点都不了解,我们将逐步了解到更多的细节. Storage contract SimpleSt ...

  2. JavaScript使用localStorage缓存Js和css文件

    对于WebApp来说,将js css文件缓存到localstorage区可以减少页面在加载时与HTTP请求的交互次数,从而优化页面的加载时间.特别是当移端信号不好高延迟时优化效果还是很显见的 下面的代 ...

  3. JustOj 2042: Dada的游戏

    题目描述 Dada无聊时,喜欢做一个游戏,将很多钱分成若干堆排成一列,每堆钱数不固定,谁能找出每堆钱数严格递增的最长区间,谁就是人生赢家了.Dada可能脑子里的水还没干,她找不出来,你来帮她找找吧. ...

  4. ajax处理文件下载

    ajax中处理文件下载,可能大数会遇到我和一样的问题,什么问题呢?就是下载程序执行了,但是浏览器没有任何下载操作,这是为什么呢? 那是因为response原因,一般请求浏览器是会处理服务器输出的res ...

  5. SSM的理解

    SSM(Spring+SpringMVC+MyBatis)框架集由Spring.SpringMVC.MyBatis三个开源框架整合而成,常作为数据源较简单的web项目的框架.其中spring是一个轻量 ...

  6. AURO OtoSys IM100 vs Lonsdor K518ISE: which better?

    Comparison: AURO OtoSys IM100 and Lonsdor K518ISE It’s aimed to help make a purchase of decent auto ...

  7. VMWare常用快捷键

    VMWare常用快捷键 Ctrl-Alt-Enter    进入全屏模式 ctrl+alt+insert      退出全屏 Ctrl-Alt            返回正常(窗口)模式 Ctrl-A ...

  8. Eloquent JavaScript #08# Bugs and Errors

    索引 Notes strict mode js类型 js测试 Debugging Exceptions finally 异常分支 Exercise Retry The locked box Notes ...

  9. JS方法转字符串

    今天接手的代码比较特殊,需要动态拼接一个table,每一行<tr>都是通过转换为字符串,再拼接在一起放到tbody中的. 其中有的td标签中有a标签,需要给a标签添加点击事件,参数好多,动 ...

  10. 跟阿铭学Linux习题答案

    第一章:走进Linux 1.简述它的发展历史,列举几种代表性的发行版 Linux之前是Unix,由于Unix收费昂贵,so,Richard Stallman 发起了开发自由软件的运动,并成立了自由软件 ...