jquery - 进行水平滑动布局的最有效方法

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

希望这可以帮助！