demo

Question

目前，示例speed和step都是1。但我需要更慢的滚动速度。如何完全控制速度。

我希望云移动得慢得多

示例

代码

(function($) {
    $.fn.scrollingBackground = function(options) {
        // settings and defaults.
        var settings = options || {};
        var speed = settings.speed || 1;
        var step = settings.step || 1;
        var direction = settings.direction || 'rtl';
        var animStep;

        // build up a string to pass to animate:
        if (direction === 'rtl') {
            animStep = "-=" + step + "px";
        }
        else if (direction === 'ltr') {
            animStep = '+=' + step + "px";
        }

        var element = this;

        // perform the animation forever:
        var animate = function() {
            element.animate({
                backgroundPosition: animStep + " 0px"
            }, speed, animate);            
        };
        animate();
    };
})(jQuery);

$("#header").scrollingBackground({
    speed: 1,
    step: 1,
    direction: 'ltr'
});

$("#header-2").scrollingBackground({
    speed: 1,
    step: 1,
    direction: 'rtl'
});

Answer 1

如果增加speed属性会降低滚动速度，因为它会增加步骤之间的延迟。我尝试了它的值为100，它看起来仍然很顺利。

Answer 2

更大的speed会使云移动缓慢。

更大量的step会让云移动得很快。

demo

Answer 3

您可能想要考虑的另一种方法是使用Spritely库。它有一个pan()方法，允许您配置速度，fps和方向，并且与您尝试执行的操作非常相似。如果你不能让你的工作满意，你可能更喜欢他们的实施。

如何在这个jQuery滚动脚本中使滚动速度更慢？

3 个答案:

demo