0

垂直方向の自動スクロールが一部で不規則に停止するようです。代わりにスムーズなスクロールが必要です。次に、垂直スクロールを自動的にリセットしたいと思います（ほぼ無限にループするか、ジャンプするだけでなく、終了しないという意味を与えます）。これを達成するにはどうすればよいですか？これまでの私のコードは次のとおりです：http：//jsfiddle.net/8KjX8/78/。

HTML

<div id="wrapper">
<ul>
    <li><div id='activity_date'>06/11/2012</div></li>
    <li><div id='activity_date'>06/11/2012</div></li>
    <li><div id='activity_date'>06/11/2012</div></li>
    <li><div id='activity_date'>06/11/2012</div></li>
    <li><div id='activity_date'>06/11/2012</div></li>
    <li><div id='activity_date'>06/11/2012</div></li>
</ul>
</div>

CSS

#activity_date {
    background-color: #cc0066;
    color: #FFF;
    width: 80px;
}
#wrapper {
    height: 240px;
    overflow: hidden;
}
#wrapper ul {
    position: relative;
    list-style-type: none;
}
#wrapper li {
    height: 30px;
    line-height: 12px;
    list-style-type: none;
}
​​

JS

(function(){
    var i = 0;

    function Scroll() {
        i++;

        if (i < $('li').length) { // scroll down till we are at the last item
            $('ul').animate({top:'-=30'+'px'}, 1000);
        }
    }

    $(document).ready(function() {
        var timeOut;

        $('ul').hover(
            function(e) { // on hover in, stop the animation
                clearTimeout(timeOut);
            }, 
            function(e) { // on hover out, continue
                timeOut = setInterval(Scroll, 1000);
            }
        );

        timeOut = setInterval(Scroll, 1000); // start the animation at document load

    });

})();
​

前もって感謝します！

4

1 に答える 1

1

アニメーションの速度は自動的に変化します。これは「イージング」と呼ばれ、アニメートの2つの標準オプションはスイングとリニアです。スイングがデフォルトであり、高速で低速の外観になります。アニメーションで線形を指定することにより、この問題を取り除く必要があります。

$('ul').animate({top:'-=30'+'px'}, 1000, 'linear');

無限にループするのは非常に難しいです。あなたがしなければならないことは、すべてのコンテンツを一連の絶対的に配置されたコンテナに入れ、それぞれを上向きにアニメートさせ、コンテナが完全に視野を離れたことを知らせる検出機能を設定することです。リストの最後に設定します。

于 2012-11-06T19:09:16.140 に答える