Question

查看其他帖子，没有帮助...

我正在使用asdw在有限的空间内移动物体。我正在试图弄清楚如何在按下按键的同时允许对象移动，而不会在开始时出现瞬间延迟。

...谢谢

$(document).ready(function(){
    var longitude = 0;
    var latitude = 0;

    $('body#sense').keypress(function(){
        if(event.which == 65 || event.which == 97){
            // Left
            if(longitude != 0){
                longitude = longitude + 10;
                $('img#map').css('margin-left', longitude);
            }
        }
        else (event.which == 68 || event.which == 100){
            // Right
            if(longitude > -200){
                longitude = longitude - 10;
                $('img#map').css('margin-left', longitude);
            }
        }
    });
});

网页

    <body id="sense">

<h2><center>Use your 'asdw' keys to move the map around</center></h2>

<div id="box">

<img id="map" src="http://www.toronto.ca/culture/victoria-square/images/ch0/Victoria-Square-map-t.gif" alt="" />


</div>

</body>

保持图像具有设定的宽度和高度，均小于图像。设置为溢出：隐藏，因此javascript在div内移动图像，因此可以看到不同的部分。

CSS

div#box {
    margin:0px auto;
    width:225px;
    height:225px;
    overflow:hidden;
}

div#box img {

}

Answer 1

使用keyDown事件，然后启动自己的计时器间隔来控制自己的重复间隔（忽略系统重复间隔），然后取消keyUp上的计时器。忽略其他关键事件。您可以在setInterval调用中选择自己的重复时间。

var timer = null;

function increaseLongitude() {
    // your code here
}

function decreaseLongitude() {
    // your code here
}

$("#sense").keyDown(function(e) {
    if (!timer) {
        if (e.which == 65 || e.which == 97) {
            timer = setInterval(increaseLongitude, 100);
            increaseLongitude();
        } else if (e.which == 68 || e.which == 100) {
            timer = setInterval(decreaseLongitude, 100);
            decreaseLongitude();
        }
    }
});

$("#sense").keyUp(function(e) {
    if (timer) {
        clearInterval(timer);
        timer = null;
    }
});

Answer 2

尝试使用keydown事件

Answer 3

查看此版本的代码。它可以通过'keydown'事件来完成。我相信这是应该做的理想方式。

http://jsfiddle.net/valllabh/yFxDN/10/

按住键时忽略延迟？

3 个答案: