1

私はこの前の質問に基づいた機能に取り組んでいます。

ただし、スクロールがゆっくりとすばやく開始されると便利ですが、ユーザーが次/前のボタンを押し続けると複数回起動されるため、アニメーション機能で使用できるイージングを使用することはできないようです。

誰かがこれを達成する方法を知っていますか？

ありがとう ：）

JSFiddleを使用：http：//jsfiddle.net/4YJPG/4/

追加の関連する質問、可変幅の新しいアイテムが右側に追加されたときにタイムラインdivの幅が動的に更新される場合、スクロールがいずれかの端に到達したときにスクロールが確実に停止するようにするための最良の方法は何ですか？

更新：タイムラインのdivが終わりを超えてスクロールするのを停止するコードを含むJSFiddle（できれば動的な幅で）： http： //jsfiddle.net/eFFKU/4/

4

2 に答える 2

1

それは難しいことではありません。これを行うだけです。次のようにonClick（左/右）で関数をバインドします

var val=5; 

setInterval(function() {
    val++;
}, 100);

'-+ 10px'をvalに置き換えて、開始が遅くなり、速く移動するようにします。考慮する必要があるのは、valを文字列に変換して「px」を連結し、valに制限を与えることですex：30

于 2012-08-23T10:05:07.013 に答える
1

要素の幅を変更したり、タイムラインにいくつかの新しい要素を追加/削除したりしても、このソリューションは機能しません。

これがjsFiddleの動作です。

var liWidth = $('#timeline ul li').outerWidth(true);
//this calculates element's width with their margins/paddings/borders
var liTotal = $('#timeline ul li').index()-9;
//need to descry first seen li's from calculation for true value of MaxRange
var MaxRange = ( liTotal  * liWidth ) * -1;

$('.prev').click(function(){
    var current = parseInt($('#timeline').css('right'));
    if ( current <= 0  && current > MaxRange ) {
        $timeline.stop(false,true).animate({'right':'-='+liWidth+'px'},1000);
    }
});

$('.next').click(function(){
    var current = parseInt($('#timeline').css('right'));
    if ( current <= -1 ) {
        $timeline.stop(false,true).animate({'right':'+='+liWidth+'px'},1000);
    }
});

そして、これを完璧に実行したい場合：次のif条件をもう1つ追加する必要があります。左に移動して右に移動ボタンをクリックし、$ timelineの右のcssに異なる値を追加すると、このボタンは完全にスライドしません。

現在の権利の値を50/liWidthに除算する方程式を記述できます。除算できない場合は、タイムラインをリセットして、next/prev関数を再度初期化できます。

于 2012-08-23T10:32:19.390 に答える