-
26-09-2019 - |
题
我很简单 抓取演示页面. 。它没有任何缓解/加速度。我想做与上等的宽松/加速度 kulesh.info (Flash网站)使用JavaScript。我怎样才能做到这一点?
在JavaScript中平滑抓取(滚动,拖动)的任何示例都将很有帮助,以及语言不可知论算法。
解决方案
您可以使用有时称为Zeno的悖论的宽松方程来获得Flash的外观。
position += (destination - position) / damping
我修改了您的JSFIDDLE,以利用它: 看一看
如果您希望我对Zeno的悖论进行更详细的描述,请让我知道,我将在此处发布一两个图像。
其他提示
我认为这是您可以通过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);
});
不隶属于 StackOverflow