1

我想要实现的是让 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/

4

1 回答 1

1

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

这是一个工作示例：

http://jsfiddle.net/NdSyB/

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

于 2011-08-12T21:08:14.470 回答