1

有没有办法使用 jquery animate 模拟滚动类型选项？现在它只是滚动相当于你给它的值（如下所示）。我不能在这个 div 上做一个自定义滚动条，因为它主要是为了使它易于在移动设备上滚动。因此，下面的示例将滚动购买它从顶部开始 -100 像素，然后停止并重复。有什么简单的方法可以使这种过渡继续下去。

jQuery(".down-arrow").mousedown(function(){
        var height = jQuery("#technology_list").height();
        //if($('#technology_list').offset().top 
        scrolling = true;
        startScrolling(jQuery("#technology_list"), "-=100px");
        //jQuery("#technology_list").animate({top: '-=25'});
    }).mouseup(function(){
        scrolling = false;
    });

    function startScrolling(obj, param)
{
    obj.animate({"top": param}, "fast", function(){
        if (scrolling)
        {
                startScrolling(obj, param);
        }
    });
4

3 回答 3

4

jsFiddle 在行动中展示它

最简单的答案是您要确保将动画设置为easing设置为linear。

.animate( { /* whats animating */ } , duration: 'XXX', easing: 'linear'
   ,function () { /* callback */ } 
);

奇怪的是，当 animate() 忽略缓动时，它的默认值实际上不是线性的（基本上将其关闭）。默认是标准缓动，它消除了“平滑度”，即我们想要的整个动画的一种速度。

这是一个示例，因此您可以看到它：

var end = 20;

for (i = 0; i < end; i++) {
  $('#test').animate({'top': '+=50px'}, 500, 'linear', function () {
      // callback
  });
}

​</p>

于 2012-07-25T14:11:37.047 回答
2

前阵子也遇到了同样的问题，把这个放在一起，基本上就是无限滚动的解决方案：

编辑：这是适合您的用例的代码：

// Assuming you also have/want a scroll up
jQuery(".up-arrow").mousedown(function() {
    // You don't need to use jQuery instead of $ inside of jQuery defined functions 
    var offset = $("#technology_list").offset();
    var topValue = offset.top;
    if ((topValue * 2) < 1000) speed = topValue * 3;
    else if ((topValue * 2) < 500) speed = topValue * 4;
    else if ((topValue * 2) < 100) speed = topValue * 8;
    else speed = topValue * 2;

    $("#technology_list").animate({
        top: 0
    }, speed);

}).mouseup(function() {
    $("#technology_list").stop();
});

jQuery(".down-arrow").mousedown(function() {
    var offset = $("#technology_list").offset();
    var topValue = offset.top;
    var height = $("#technology_list").height();
    if (((height - topValue) * 2) < 1000) speed = (height - topValue) * 2;
    else if (((height - topValue) * 2) < 500) speed = (height - topValue) * 2;
    else if (((height - topValue) * 2) < 100) speed = (height - topValue) * 2;
    else speed = (height - topValue) * 2;

    $("#technology_list").animate(function() {
        top: $("#technology_list").height()
    }, speed);


}).mouseup(function() {
    $("#technology_list").stop();
});​

编辑结束。

$(".scroll-left").hover(function() {

    if (($(this).parent().scrollLeft() * 2) < 1000) speed = $(this).parent().scrollLeft() * 3;
    // If it is less than 500 pixels from the edge, then it takes 3 times as long as the scrollLeft value in milliseconds. (Sorry about the if's being hard to read)

    else if (($(this).parent().scrollLeft() * 2) < 500) speed = $(this).parent().scrollLeft() * 4;
    // And if it is less than 250  pixels, it takes 4 times as long

    else if (($(this).parent().scrollLeft() * 2) < 100) speed = $(this).parent().scrollLeft() * 8;
    // Less than 50, it takes 8 times as long

    else speed = $(this).parent().scrollLeft() * 2;
    // And if it is more than 500 run it at 2 milliseconds per pixel

    $(this).parent().animate({
        scrollLeft: 0
    }, speed);
    // Scroll it to the beginning at the above set speed
}, function() {
    $(this).parent().stop();
    // On mouseOut stop the animation
});

$(".scroll-right").hover(function() {
    parent = $(this).parent()[0];
    parentWidth = $(this).parent()[0].scrollWidth;
    // Cache parent and parentWidth (stops delay on hover)

    if (((parentWidth - parent.scrollLeft) * 2) < 1000) speed = (parentWidth - parent.scrollLeft) * 2;
    // Pretty much the same thing as before but this time it sort of makes a "scrollRight"

    else if (((parentWidth - parent.scrollLeft) * 2) < 500) speed = (parentWidth - parent.scrollLeft) * 2;

    else if (((parentWidth - parent.scrollLeft) * 2) < 100) speed = (parentWidth - parent.scrollLeft) * 2;

    else speed = (parentWidth - parent.scrollLeft) * 2;

    $(this).parent().animate({
        scrollLeft: $(this).siblings(".row-scroll").width()
    }, speed);
    // Same thing as before, but this time we scroll all the way to the right side
}, function() {
    $(this).parent().stop();
});​

这是直接从我的代码中复制的，但这个想法是合理的，当它靠近边缘时，乘法会减慢它的速度。

它并不完美或接近它，如果你想要更精细的东西，那么你应该尝试暂停

于 2012-07-25T13:52:59.927 回答
1

您可以尝试使用 jQuery 插件 ScrollTo：http ://demos.flesler.com/jquery/scrollTo/

于 2012-07-25T13:50:57.987 回答