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

ジャバスクリプト

$(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 でラップする必要があります。(この場合、3000px にハードコードしましたが、おそらくこれを動的に計算したいと思うでしょう)

これが実際の例です：

http://jsfiddle.net/NdSyB/

これが役に立てば幸いです。そうであれば、回答済みとしてマークしてください。

于 2011-08-12T21:08:14.470 に答える