Question

我有一个id为bottom_arrow的div，我想左/右使用我的键盘箭头左右移动div 100px。我怎么能这样做？

Answer 1

作为一项规则，按键事件会转到输入或某个具有焦点的控件，如果您通常在页面上需要它们，由于删除标准行为，有时会有点不赞成，然后将keydown事件绑定到整个文档。

$('body').keydown(function(event) {
    switch (event.keycode) {
        case 37: // left arrow key
           $('#bottom_arrow').animate({ 'left': '-=100' });
           break;
        case 39: // right arrow key
           $('#bottom_arrow').animate({ 'left': '+=100' });
           break;
    }
});

我使用keydown而不是keypress，因为用户希望在按下按键时触发它。

Answer 2

$('body').keydown(function(event) {
    switch (event.keycode) {
        case 37: // left arrow key
           $('#bottom_arrow').animate({ 'left': '-=100' });
           break;
        case 39: // right arrow key
           $('#bottom_arrow').animate({ 'left': '+=100' });
           break;
    }
});

Answer 3

根据Jquery文档，请改用event.which。

$('body').keydown(function(event) {
    switch (event.which) {
        case 37: // left arrow key
            $('#bottom_arrow').animate({ 'left': '-=100' });
            break;
            case 39: // right arrow key
            $('#bottom_arrow').animate({ 'left': '+=100' });
            break;
    }
});

如何使用键盘箭头键分别向左/右移动div 100px

3 个答案: