进行水平滑动布局的最有效方法答案

【问题标题】：Most efficient way to do a horizontal sliding layout进行水平滑动布局的最有效方法
【发布时间】：2012-08-31 18:58:43
【问题描述】：

以下面的布局为例。

黑色边框代表用户屏幕。

三个小矩形代表导航按钮，点击后大框对应的颜色会水平滑动到用户屏幕。

例如，当我单击蓝色小按钮时，蓝色大框（即 div）将向左滑动到用户屏幕，其他导航按钮也是如此。

您能否为我指明正确的方向来实现这一目标？

【问题讨论】：

感谢您的所有回答。它们都可以工作，但我必须在那里选择一个:-)

标签： jquery html css layout navigation

【解决方案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>

$(".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;
}

【讨论】：

【解决方案2】：

边缘有点粗糙，但这应该给你一个不错的参考：

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

【讨论】：

嘿伙计！你应该把代码放在你的答案中，以防你的链接被删除。这样，您将确保您的答案的可用性并在将来帮助其他人;)

【解决方案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
});

希望这会有所帮助！

【讨论】：

谢谢。我有个问题。如果我删除背景，如何从屏幕上删除非活动 div 的内容。现在他们似乎停留在屏幕上。如果有背景颜色，这不是问题，但如果没有背景颜色，它们不会被隐藏。