2

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

我从字面上阅读了十几篇关于 Stackoverflow 的帖子，这些帖子似乎在没有真正回答的情况下解决了这个问题……所以请不要将其作为重复问题关闭

更新：我只是想使用箭头键在文章（如博客文章）之间滚动。我想要的只是将页面滚动到下一个分隔符。

4

1 回答 1

0

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

此代码显示包含文本的 div 标记，在包装器内浮动到左侧。然后将其包含在另一个小于整个文本（其中一部分）的包装器中。

然后使用 jQuery 使用箭头键滚动内容。如果它已经在动画，则该.not(":animated")部分会阻止它动画。在一些 5 岁的孩子决定非常不耐烦之后，使用它只会让它变得更好，而无需排长队。

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;
}

​<strong>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);
        }
    });
});​
于 2012-12-08T21:48:56.303 回答