Javascript 如何将滚动背景效果添加到具有不同设置的多个元素？

在这个演示中

此代码仅用于一个背景。我想添加多个不同方向和速度的背景

 var scrollSpeed = 70;
 var step = 1;
 var current = 0;
 var imageWidth = 2247;
 var headerWidth = 800;  

 var restartPosition = -(imageWidth - headerWidth);

 function scrollBg(){
  current -= step;
  if (current == restartPosition){
   current = 0;
  }

  $('#header').css("background-position",current+"px 0");
 }

 var init = setInterval("scrollBg()", scrollSpeed);

目前，它具有以下设置：

  $('#header').css("background-position",current+"px 0");

在网站中，我想在

#页脚

或

#内容

背景上也使用此效果。但速度和方向不同

有没有更好、更优化的jquery方法可以达到同样的效果？

---

如果没有javascript，我们可以使用CSS 3获得同样的效果吗？

我可以想出以下解决方案。我不确定它是否有效。将等待任何人发表评论或提供更好的选择。 在那之前…：

var scrollSpeed = 70;
 var step = 1;
 var current = 0;
 var images = 
 [
    {
    imageWidth:2247,
    imagePath:"images/image1"
    },
    {
    imageWidth:1200,
    imagePath:"images/image2"
    }
 ]
 var headerWidth = 800;  
 var imageRotateCount = 0;
 var imagesLength = images.length;

 $('#header').css("background-image", images[0].imagePath);

 function scrollBg(){
    var curIndex = imageRotateCount%imagesLength;
    var curImage = images[curIndex];
  current -= step;

    var restartPosition = -(curImage.imageWidth - headerWidth);
  if (current == restartPosition){
   current = 0;
     imageRotateCount++;
     curIndex = imageRotateCount%imagesLength;
     curImage = images[curIndex];
     $('#header').css("background-image", curImage.imagePath);
  }

  $('#header').css("background-position",current+"px 0");
 }

 var init = setInterval("scrollBg()", scrollSpeed);

---

我可以想出下面的解决办法。我不确定它是否有效。将等待任何人发表评论或提供更好的选择。 在那之前…：

var scrollSpeed = 70;
 var step = 1;
 var current = 0;
 var images = 
 [
    {
    imageWidth:2247,
    imagePath:"images/image1"
    },
    {
    imageWidth:1200,
    imagePath:"images/image2"
    }
 ]
 var headerWidth = 800;  
 var imageRotateCount = 0;
 var imagesLength = images.length;

 $('#header').css("background-image", images[0].imagePath);

 function scrollBg(){
    var curIndex = imageRotateCount%imagesLength;
    var curImage = images[curIndex];
  current -= step;

    var restartPosition = -(curImage.imageWidth - headerWidth);
  if (current == restartPosition){
   current = 0;
     imageRotateCount++;
     curIndex = imageRotateCount%imagesLength;
     curImage = images[curIndex];
     $('#header').css("background-image", curImage.imagePath);
  }

  $('#header').css("background-position",current+"px 0");
 }

 var init = setInterval("scrollBg()", scrollSpeed);

---

刚看到OP的答案，但还是决定发布：

我创建了一个jQuery插件来实现这一点：

(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: 50,
    step: 50,
    direction: 'ltr'
});

这是非常基本的，并且假设您正在调用它的元素上的background repeat是'repeat-x'。这样，就不需要经常重置背景位置

---

工作示例：

刚刚看到OP的答案，但还是决定发布：

我创建了一个jQuery插件来实现这一点：

(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: 50,
    step: 50,
    direction: 'ltr'
});

这是非常基本的，并且假设您正在调用它的元素上的background repeat是'repeat-x'。这样，就不需要经常重置背景位置

---

工作示例：

不要使用字符串作为

setInterval

的第一个参数，只需传递函数即可，例如

setInterval（scrollBg，scrollSpeed）

传递字符串将在后台调用

eval

，这是邪恶的。不要使用字符串作为

setInterval

的第一个参数，只需传递函数即可，例如

setInterval（scrollBg，scrollSpeed）

传递字符串将在后台调用

eval

，这是邪恶的。@Andrew Whitaker-感谢您的回答和JSFIDLE链接。你的解决方案与我找到的链接有什么不同？@Jitendra:我刚刚访问了你发布的链接。我想唯一的区别是我使用的是jQuery动画，而不是setInterval。你发布的插件看起来更健壮，有更多的选项等等。我也没有在任何地方使用

eval（）

。@Jitendra:我不确定。我可以做一些基准测试，然后再给你回复。不过，我怀疑两者之间的差别将是极小的；这取决于jQuery的动画功能的实现。@Andrew Whitaker-您测试过吗？@Jitendra Vyas:我在这里设置了一个jsperf:这让我相信我的解决方案更快。@Andrew Whitaker-谢谢您的回答和JSFIDLE链接。你的解决方案与我找到的链接有什么不同？@Jitendra:我刚刚访问了你发布的链接。我想唯一的区别是我使用的是jQuery动画，而不是setInterval。你发布的插件看起来更健壮，有更多的选项等等。我也没有在任何地方使用

eval（）

。@Jitendra:我不确定。我可以做一些基准测试，然后再给你回复。不过，我怀疑两者之间的差别将是极小的；这取决于jQuery的animate函数的实现。@Andrew Whitaker-您测试过吗？@Jitendra Vyas:我在这里设置了一个jsperf：这让我相信我的解决方案更快。