2

Web ページで、キーボードの左右の矢印キーを使用してテキスト ブロック間を移動できるようにしたいと考えています。これにはJqueryが必要だと思います。

私は文字通り、この質問に実際に答えずに対処しているように見えるStackoverflowに関する12の投稿を読みました...したがって、これを重複した質問として閉じないでください

更新: 矢印キーを使用して記事 (ブログ投稿など) 間をスクロールしたいだけです。私が望むのは、ページを次の仕切りまでスクロールすることだけです。

4

1 に答える 1

0

これが私があなたのために作ったJSフィドルです：http://jsfiddle.net/3NAwz/

このコードは、テキストを含む div タグを示し、ラッパー内で左にフローティングします。これは、テキスト全体 (テキストの 1 つのセクション) よりも小さい別のラッパーに含まれます。

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 に答える