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

时间:2010-12-10 01:29:20

标签: javascript jquery

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

3 个答案:

答案 0 :(得分:5)

作为一项规则,按键事件会转到输入或某个具有焦点的控件,如果您通常在页面上需要它们,由于删除标准行为,有时会有点不赞成,然后将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,因为用户希望在按下按键时触发它。

答案 1 :(得分:0)

$('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;
    }
});

答案 2 :(得分:0)

根据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;
    }
});