Question

在此演示中http://www.htmldrive.net/items/demo/527/Animated-background-image-with-jQuery

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

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

在网站中，我想在#footer或#content背景上使用此效果。但速度和方向不同。

还有更好，更优化的jquery方法来达到同样的效果吗？

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

Answer 1

刚看到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'。这样，就不需要经常重置背景位置。

工作示例：http://jsfiddle.net/andrewwhitaker/xmtpr/

Answer 2

我可以找出以下解决方案。我不确定它是否有效。将等待任何人发表评论或提供更好的选择。直到......：

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

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

2 个答案: