質問

私は簡単にしました デモページをつかみます. 。緩和/加速はありません。同じ緩和/加速をしたいのですが kulesh.info （Flash Webサイト）JavaScriptを使用。どうやってやるの？

JavaScriptの滑らかなつかみ（スクロール、ドラッグ）の例は、言語不可知論的アルゴリズムと同様に役立ちます。

役に立ちましたか？

解決

Zenoのパラドックスと呼ばれることもある緩和方程式を使用して、フラッシュルックを取得できます。 

position += (destination - position) / damping

私はあなたのJSFiddleを修正してそれを利用しました： 見てください

Zenoのパラドックスの詳細な説明をしてほしい場合は、私に知らせてください。ここに1つか2つの画像で投稿します。

他のヒント

これはあなたがjqueryで得ることができる最高だと思います： [デモ] 

jQuery.fx.interval = 1; // since v1.4.3
var photos = $(".photos");
var scrollLeft = photos[0].scrollLeft;
var $el = $(photos[0]);
var lastTime = +new Date();


$(window).mousemove(function(event){
    var now = +new Date();
    var elapsed = now - lastTime;
    if (dragging && elapsed > 10) {
        scrollLeft += x - event.clientX;
        $el.stop().animate({scrollLeft:  scrollLeft}, 300, "easeOutCubic");
        x = event.clientX;
        lastTime = +new Date();
    }
});

$(window).mouseup(function(event){
    dragging = false;
    $el.stop().animate({scrollLeft:  scrollLeft}, 500, "easeOutCubic");
});

最新のブラウザの画像レンダリングパフォーマンスに関連しているため、可能な限り（わずかな）遅れは現時点では修正できません。 テスト - シンプルな線形アニメーション、イベントなし、jQueryなし

この行を交換してみてください：

photos[0].scrollLeft += x - event.clientX;

これとともに （デモを更新しました):

photos.animate({ scrollLeft : '+=' + (x - event.clientX) }, 12, 'easeOutCirc');

JQuery UIをクリックして、緩和オプションを含めることに注意してください。また、JFiddle（Firefoxを使用）デモで非常にびくびくしていますが、デスクトップでテストするとき、またはChromeでそのデモを見るときはそれをまったくしません。理想的には、JQuery Animateを使用せずに緩和機能を使用するのが最適です。しかし、これはあなたにアイデアを与えるはずです。

var dragging = false;
var x, startX, startTime, stopTime;
var photos = $(".photos");

photos.mousedown(function(event){
    dragging = true;
    startX = x = event.clientX;
    startTime = new Date();
    event.preventDefault();
});

$(window).mousemove(function(event){
    if (dragging) {
        photos[0].scrollLeft += x - event.clientX;
        stopTime = new Date();
        x = event.clientX;
    }
});

$(window).mouseup(function(event){
    dragging = false;
    var left = photos[0].scrollLeft;
    var dx = (startX - event.clientX);
    var time = stopTime - startTime;
    var speed =time/dx;
    photos.animate({ scrollLeft : (left + dx*time/500), easing :'swing' }, 100/time*1000);  
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top