我做了一个简单的抓取演示页面 http://jsfiddle.net/NV/Nkf9n/。它没有任何缓动/加速。我想做同样的缓动/加速库莱什信息网 http://kulesh.info/(Flash 网站)使用 JavaScript。我怎样才能做到这一点?
JavaScript 中任何平滑抓取(滚动、拖动)的示例以及与语言无关的算法都会有所帮助。
我认为这是使用 jQuery 能得到的最好的效果:[Demo http://jsbin.com/ageci3/26/]
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");
});
请注意,目前无法纠正所有可能的(轻微)迟缓,因为它与现代浏览器的图像渲染性能有关。Test http://jsbin.com/ageci3/9/- 简单的线性动画,没有事件,没有 jQuery
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)