jquery - 水平スライドレイアウトを行うための最も効率的な方法

Question

以下のレイアウトを例にとってみましょう。

黒い境界線はユーザー画面を表します。

3つの小さな長方形はナビゲーションボタンを表しており、クリックすると、大きなボックスの対応する色がユーザー画面に水平方向にスライドします。

たとえば、小さな青いボタンをクリックすると、大きな青いボックス（div）が左にスライドしてユーザー画面に移動します。他のナビゲーションボタンも同様です。

これを達成する方法について、正しい方向を教えていただけますか？

Answer 1

あなたはおそらくコンテンツスライダーを探しています。あなたが望むものに似ているものの例はこれです：http：//bxslider.com/examples/auto-show-pager。

または、自分で作成することもできます。

http://jsfiddle.net/charlescarver/N3RZY/5/

HTML

<div class="viewport">
    <div class="inside">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</div>

<div class="three-l">Green</div>
<div class="two-l">Blue</div>
<div class="one-l">Red</div>

jQ

$(".three-l").click(function() {
  $(".viewport").animate({scrollLeft: 400}, 500);
});
$(".two-l").click(function() {
  $(".viewport").animate({scrollLeft: 200}, 500);
});
$(".one-l").click(function() {
  $(".viewport").animate({scrollLeft: 0}, 500);
});

CSS

.viewport{
    width:200px;
    height:200px;
    overflow-x:scroll;

}

.inside{
    width:1000px;
    height:200px;
}

.inside div{
    height:200px;
    width:200px;
    float:left;
}

.one{
    background-color:red;
}

.two{
    background-color:blue;
}

.three{
    background-color:green;
}

Answer 2

エッジの周りは少しラフですが、これはあなたにまともなリファレンスを与えるはずです：

http://jsfiddle.net/howlx5/5E9nn/

Answer 3

まさにあなたがそれを視覚化した方法。これがあなたが望むことをする小さなデモです：小さなリンク。コードはかなり自明ですが、あいまいな部分があれば説明させていただきます。JavaScript部分のコメント付きバージョンは次のとおりです。

$(".nav div").click(function() { //when a nav div is clicked
    var cur = $(this); //get the div that was clicked
    var idx = cur.index(); //get its index (0, 1 or 2)
    $($(".screen div")[idx]).animate({width: "100%"}); //show the appropriate screen-filling div
    $(".screen div").not(":eq(" + idx + ")").animate({width: "0"}); //hide all others
});

お役に立てれば！