当前位置：文江博客话题详情

抓取顺畅

发布于 2024-10-03 17:15:27 字数 261 浏览 4 评论 0原文

我制作了一个简单的抓取演示页面。它没有任何缓动/加速。我想使用 JavaScript 执行与 kulesh.info （Flash 网站）相同的缓动/加速操作。我怎样才能做到这一点？

JavaScript 中任何平滑抓取（滚动、拖动）的示例以及与语言无关的算法都会有所帮助。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

且行且努力 2024-10-10 17:15:27

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

I think this is the best you can get with jQuery: [Demo]

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");
});

Note, all the possible (slight) sluggishness can't be corrected at the moment, because it's related to image rendering performance of modern browsers. Test - simple linear animation, no events, no jQuery

回复收藏 0 原文

微凉徒眸意 2024-10-10 17:15:27

您可以通过使用有时被称为芝诺悖论的缓动方程来获得闪光外观。

position += (destination - position) / damping

我修改了你的 jsFiddle 以使用它：看看

如果你想让我给一个关于芝诺悖论的更详细描述，请告诉我，我将在此处发布一个并附上一两张图像。

You can get the flash look by using an easing equation sometimes referred to as zeno's paradox.

position += (destination - position) / damping

I modified your jsFiddle to make use of it: Have a look

If you'd like me to give a more detailed description of zeno's paradox, let me know and I'll post one here with an image or two.

回复收藏 0 原文

书间行客 2024-10-10 17:15:27

尝试将此行替换

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

为：（更新的演示）：

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

请注意，我单击了 jQuery UI包括宽松选项。另外，它在 jFiddle（使用 Firefox）演示中非常跳跃，但当我在桌面上测试它或在 Chrome 中查看该演示时，它根本不会这样做。理想情况下，使用缓动函数而不使用 jQuery animate 是最好的。但这应该给你一个想法。

Try replacing this line:

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

with this (Updated demo):

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

Note that I clicked on jQuery UI to include the easing options. Also, it is very jumpy in the jFiddle (using Firefox) demo, but it doesn't do that at all when I test it on my desktop or if I look at that demo in Chrome. Ideally using the easing function without using jQuery animate would be best. But this should give you an idea.

回复收藏 0 原文

流云如水 2024-10-10 17:15:27

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);  
});

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);  
});

回复收藏 0 原文

~没有更多了~