jquery – 使用按键移动元素(多个)

前端之家收集整理的这篇文章主要介绍了jquery – 使用按键移动元素(多个)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
对角移动不起作用并且在left-longPress / right同时发出

但是在双键按下时,这艘船发疯了!

@H_403_4@$(document).bind('keydown',function(e) { var Box = $("#plane"),left = 37,up = 38,right = 39,down = 40 if (e.keyCode == left) { Box.animate({left: "-=5000"},3000); } if (e.keyCode == up) { Box.animate({top: "-=5000"},3000); } if (e.keyCode == right) { Box.animate({left:"+=5000"},3000); } if (e.keyCode == down) { Box.animate({top: "+=5000"},3000); } }); $(document).bind('keyup',function() { $('#plane').stop(); });

解决方法

我搞砸了类似的事情,这是我遇到的解决方案. @H_403_4@setInterval(movePlane,20); var keys = {} $(document).keydown(function(e) { keys[e.keyCode] = true; }); $(document).keyup(function(e) { delete keys[e.keyCode]; }); function movePlane() { for (var direction in keys) { if (!keys.hasOwnProperty(direction)) continue; if (direction == 37) { $("#plane").animate({left: "-=5"},0); } if (direction == 38) { $("#plane").animate({top: "-=5"},0); } if (direction == 39) { $("#plane").animate({left: "+=5"},0); } if (direction == 40) { $("#plane").animate({top: "+=5"},0); } } }

Demo

延迟的问题似乎是大多数浏览器将采用第一个输入(在keyDown上),然后在反复运行函数之前它们有半秒的延迟.如果我们不记得keydown上的函数,而是有一个间隔检查一个关联数组,我们存储哪些键被按下,这似乎可以平滑移动.它还允许一次按下多个键,这意味着对角线移动.然后我们将使用keyup事件删除相应的键.

在此解决方案中,您有两种方法来管理要移动的元素的速度.

>间隔的更新频率. (上面演示中的20ms)
>平面每次移动的像素数. (上面的演示中有5个)

我发现间隔频率上的20毫秒可以让你运动相当平稳.

我意识到这是一个非常古老的线索,但我认为无论如何我都会做出贡献.

猜你在找的jQuery相关文章