Question

我想要实现的是让4个div在“窗口空间”内水平滚动（从左到右）。我也包含了缓动插件，当你单击“TopLinks”链接并且div上下移动时它可以正常工作......但是，当尝试从左向右滚动时，缓动完全消失。

我想知道它是否与我的CSS有关，但我不确定。任何帮助使这项工作将不胜感激。这是我的代码：

HTML

<ul id="topLinks">
    <li><a href="#contact">Contact</a></li>
    ...
    <li><a href="#home">Home</a></li>
</ul>
....
<div id="slider">
    <div class="active" id="home">
    //code here
    </div>
    ...
    <div class="active" id="contact">
    //Fourth & last div
    </div>
</div>

CSS

#slider { 
    position:relative;
    width:530px;
    height:380px;
    margin:60px auto auto 0px;
    overflow:hidden;
}

div.active {
    float:left;
    text-align:justify;
    line-height:30px;
    width:530px;
    height:380px;
    margin: 0px 0px 5px 0px;
    padding:0px;
}

JAVASCRIPT

$(document).ready(function() {
    $('#topLinks li a').click(function() {
        $('#slider').scrollTo( $(this).attr('href'), 2500, {easing:'swing', axis:'x'});
    });
});

我也会把它扔在jsfiddle上，所以你有一个工作演示。 http://jsfiddle.net/BftMr/

Answer 1

您需要使用另一个div来包装滑块div中的每个项目，该div跨越其包含的每个项目的宽度。（在这种情况下，我将其硬编码为3000px，但您可能想要动态计算它）

这是一个有效的例子：

http://jsfiddle.net/NdSyB/

希望这有帮助，如果确实如此，请将其标记为已回答。

使用ScrollTo插件水平滚动div

1 个答案: