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

【问题标题】：How use keyboard arrow keys to move a div 100px left/right respectively如何使用键盘箭头键将 div 分别向左/向右移动 100px
【发布时间】：2010-12-10 01:29:19
【问题描述】：

我有一个 id 为 bottom_arrow 的 div，我想使用我的键盘箭头左/右将 div 左右移动 100 像素。我该怎么做？

【问题讨论】：

在我自己的搜索中我发现了这个atomicrobotdesign.com/blog/htmlcss/…
顺便发现一个重复的：*.com/questions/4104158/…
很好的例子，虽然那里使用了 HTML5 <canvas>，但 IE 直到 IE9 才支持它。

标签： javascript jquery

【解决方案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，因为用户希望它在按键时触发。

【讨论】：

@Sam：很好，请记住，您可能需要position 和<div>，以便改变left 的位置会产生预期的效果。
我应该如何设置 div 的样式以便我可以使用上下箭头移动它？
@Sam: Up/Down 是键码 38/40，与上面一样使用，但使用 top css 样式。如有必要，请确保元素具有 position: absolute; 或 position: relative;。
是的，我的意思是说左/右。我尝试了不同的位置，但效果不大。
@Sam：如果不查看相关的 HTML/CSS，有时很难看出这些问题的问题所在。您是否为要移动的项目使用了位置属性？在您的问题上发布一些代码，稍后我会看看。

【解决方案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;
    }
});

【讨论】：

【解决方案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;
    }
});

【讨论】：