最有效的方式做一个水平滑动布局

Question

以下面的布局为例。

黑色边框代表用户屏幕。

三个小矩形表示导航按钮，单击时，较大框的相应颜色将水平滑动到用户屏幕。

例如，当我点击小蓝色按钮时，大蓝框（这是一个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

正是你想象它的方式。这是一个做你想做的小演示：little link。代码非常自我解释，但如果它含糊不清，我很乐意解释任何部分。这是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
});

希望这有帮助！