Question

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

我已经在Stackoverflow上读了十几篇帖子，似乎没有真正回答这个问题......所以请不要将此作为重复的问题关闭

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

Answer 1

这是我为你制作的JS小提琴：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;
}

<强>的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);
        }
    });
});

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

1 个答案: