顺利抓住

Question

我做了一个简单的抓取演示页面.它没有任何缓和/加速.我想使用JavaScript 在kulesh.info(Flash网站)上进行相同的缓动/加速.我怎样才能做到这一点？

在JavaScript中平滑抓取(滚动,拖动)的任何示例都是有用的,也是一种语言无关的算法.

Answer 1

我认为这是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