jquery - 如何使用键盘箭头键在 HTML 元素之间导航

Question

我希望我的网页允许使用键盘上的左右箭头键在文本 block 之间导航。我认为这需要 Jquery。

我确实在 Stackoverflow 上阅读了十几篇帖子，这些帖子似乎解决了这个问题，但没有真正回答它......所以请不要将其作为重复问题关闭

更新:我只想使用箭头键在文章(例如博客文章)之间滚动。我想要的只是将页面滚动到下一个分隔线。

Answer 1

这是我为你制作的 JS Fiddle:http://jsfiddle.net/3NAwz/

此代码显示包含文本的 div 标签，在包装器内 float 到左侧。然后将其包含在比整个文本(其中一部分)小的另一个包装器中。

然后使用 jQuery 使用箭头键滚动内容。如果它已经在动画化，则 .not(":animated") 部分会阻止它动画化。使用这个只会让事情变得更好，而不会在某个 5 岁的 child 决定变得非常不耐烦后排起可怕的长队。

HTML

<div class="wrapper">
    <div class="inner">
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquam erat vitae nibh convallis quis luctus turpis dignissim. Suspendisse imperdiet interdum consequat. Curabitur erat nisl, gravida et aliquet vitae, faucibus vitae lacus.</div>
        <div class="text">Donec dignissim lorem eu augue tincidunt facilisis. Etiam leo purus, tristique eu tempus gravida, auctor sit amet velit. Quisque mattis, libero ut pharetra luctus, tellus justo viverra elit, sodales scelerisque ipsum magna vel felis.</div>
        <div class="text">Pellentesque ligula mauris, volutpat id molestie posuere, fermentum eu lacus. Donec quis metus nisi, et accumsan massa. Morbi eget augue eget lorem semper cursus sit amet non tortor. Aliquam tempor rhoncus odio sit amet fermentum.</div>
    </div>
</div>​

CSS

.wrapper {
    width:340px;
    overflow:hidden;
    border:1px #000 solid;
}
.inner {
    width:1020px;
}
.text {
    float:left;
    width:300px;
    padding:20px;
    font-size:14px;
    font-weight:bold;
    font-family:Arial;
}

​jQuery

$(document).ready(function() {
    $(document).keyup(function(event) {
        var key = event.which;
        if(key == 37) { // Left arrow key
            $(".wrapper").not(":animated").animate({ scrollLeft: "-=340px" }, 500);
        }
        if(key == 39) { //Right arrow key
            $(".wrapper").not(":animated").animate({ scrollLeft: "+=340px" }, 500);
        }
    });
});​