解决js中onkeydown事件键盘控制div移动鼠标卡顿
2016-07-10 21:11
1066 查看
当在键盘上按下按键之后,div移动会卡顿一下,然后再继续持续移动。原因是系统要区分用户是否连续输入,第一个到第二个之间有一个停顿时间,键盘在第一次keydown后,不能连续触发onkeydown,因为没有keyup,所以需要一个间隔来判断是连按。
当然可以快速的按键,这样就不会卡了,但是用户一般都不会这样做。所以为了避免在制作动画的时候,给用户产生动画不流畅的感觉。解决方案是设置一个定时器(代码我是参考网上资源的,修改了细节):先开一个定时器,让div一直处于(往4个方向)准备移动的状态(初始4个方向的值都是false,div就保持在原地不动),当按下某个方向键,这个方向的值就改变为true,div就会开始往这个方向移动,松开方向键,这个方向的值就改变为false , div就停止这个方向移动了。
这段代码出现卡顿现象:
解决卡顿代码:
当然可以快速的按键,这样就不会卡了,但是用户一般都不会这样做。所以为了避免在制作动画的时候,给用户产生动画不流畅的感觉。解决方案是设置一个定时器(代码我是参考网上资源的,修改了细节):先开一个定时器,让div一直处于(往4个方向)准备移动的状态(初始4个方向的值都是false,div就保持在原地不动),当按下某个方向键,这个方向的值就改变为true,div就会开始往这个方向移动,松开方向键,这个方向的值就改变为false , div就停止这个方向移动了。
这段代码出现卡顿现象:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>test</title> <style type="text/css"> #div1 { width: 100px; height: 100px; background: #ccc; position: absolute; margin:0 auto; } </style> <script type="text/javascript"> document.onkeydown=function (ev){ var oEvent=ev||event; var oDiv=document.getElementById('div1'); var code=oEvent.keyCode; /*附上键码值 keycode left arrow --> 37 up arrow --> 38 right arrow --> 39 dw arrow --> 40*/ switch (code) { case 37: console.log(code) oDiv.style.left=oDiv.offsetLeft-5+'px'; break; case 38: console.log(code) oDiv.style.top=oDiv.offsetTop-5+'px'; break; case 39: console.log(code) oDiv.style.left=oDiv.offsetLeft+5+'px'; break; case 40: console.log(code) oDiv.style.top=oDiv.offsetTop+5+'px'; break; } } </script> </head> <body> <div id="div1"></div> </body> </html>
解决卡顿代码:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>test</title> <style type="text/css"> #div1 { width: 100px; height: 100px; background: #ccc; position: absolute;; } </style> </head> <body> <div id="div1"></div> <script type="text/javascript"> var oDiv = document.getElementById('div1'); var left = false; var right =false; var up = false; var dw = false; setInterval( function(){ if (left){ console.log(oDiv) oDiv.style.left = oDiv.offsetLeft-5+'px'; } else if (up) { oDiv.style.top = oDiv.offsetTop-5+'px'; } else if (right) { console.log(oDiv); oDiv.style.left = oDiv.offsetLeft+5+'px'; } else if (dw) { oDiv.style.top = oDiv.offsetTop+10+'px'; } },100) document.onkeydown=function (ev){ var ev = ev || event; var code= ev.keyCode; switch (code) { case 37: left = true; break; case 38: up = true; break; case 39: right = true; break; case 40: dw = true; break; } } document.onkeyup =function(ev){ var ev = ev || event; var code = ev.keyCode; switch (code) { case 37: left = false; break; case 38: up = false; break; case 39: right = false; break; case 40: dw = false; break; } } </script> </body> </html>
相关文章推荐
- 用NSJSONSerialization解析NSURLSession中的json数据
- 书籍推荐
- JSP
- Javascript类型转换的规则
- Python开发【第十一篇】:JavaScript
- arcgis api for js开发心得
- js 判断一组日期是否是连续的
- JavaScript之数据类型
- JS传值和传引用
- 浏览器输入网址后台是如何运作的
- 在js中实现继承有几种方式
- jsDOM编程-乌龟抓小鸡游戏
- jsp过滤器简介
- JavaScript 事件
- 详解JavaScript中的Url编码/解码,表单提交中网址编码
- window对象的属性和方法
- js调试控制台使用详解图解
- jsp
- js - 对象
- a 中调用js的几种方法整理及使用推荐