在同一页面上需要多个相同的jQuery效果

Question

所以我使用这个jQuery背景滚动条，基本上我想在同一页上获得两个以上的速度（以不同的速度），我无法弄清楚怎么做。

http://www.devirtuoso.com/2009/07/how-to-build-an-animated-header-in-jquery/

var scrollSpeed = 70;  // Speed in milliseconds 
var step = 1;    // How many pixels to move per step 
var current = 0;   // The current pixel row 
var imageHeight = 4300;  // Background image height 
var headerHeight = 300;  // How tall the header is. 

//The pixel row where to start a new loop 
var restartPosition = -(imageHeight - headerHeight); 

function scrollBg(){ 

    //Go to next pixel row. 
    current -= step; 

    //If at the end of the image, then go to the top. 
    if (current == restartPosition){ 
     current = 0; 
    } 

    //Set the CSS of the header. 
    $('#header').css("background-position","0 "+current+"px"); 


} 

//Calls the scrolling function repeatedly 
var init = setInterval("scrollBg()", scrollSpeed); 

我可以在其他的CSS，将脚本添加，但我想对于其他的div不同的速度。

Answer 1

@andy，这是Tom Th的想法，即一个js构造函数，从中可以实例化多个实例：

function bgScroller(options) { 
    var settings = { 
     containerID: '', //id of the scroller's containing element 
     scrollSpeed: 50, //Speed in milliseconds 
     step: 1, //How many pixels to move per step 
     imageHeight: 0, //Background image height 
     headerHeight: 0, //How tall the header is. 
     autoStart: true 
    }; 
    if(options) { 
     jQuery.extend(settings, options); 
    } 
    var current = 0, // The current pixel row 
     restartPosition = -(settings.imageHeight - settings.headerHeight), //The pixel row where to start a new loop 
     interval = null, 
     $container = jQuery('#' + settings.containerID), 
     that = {}; 
    if(!$container.length || !settings.imageHeight || !settings.headerHeight) { 
     return false; //nothing will work without these settings so let's not even try 
    } 
    function setBg() { 
     $container.css("background-position", "0 " + current + "px"); 
    } 
    function scrollBg(){ 
     current -= settings.step;//Go to next pixel row. 
     //If at the end of the image, then go to the top. 
     if (current <= restartPosition){ 
      current = 0; 
     } 
     setBg(); 
    } 
    that.reset = function() { 
     that.stop(); 
     current = 0; 
     setBg(); 
    } 
    that.start = function() { 
     interval = setInterval(scrollBg, settings.scrollSpeed); 
    }; 
    that.stop = function(){ 
     clearInterval(interval); 
    }; 
    that.reset(); 
    if(settings.autoStart) { 
     that.start(); 
    } 
    return that; 
} 

参数如文字“地图”，覆盖在构造函数中的硬编码默认值对象的属性传递。对于不包含的任何参数，将使用默认值。这里有几个例子：

var headerScroller = new bgScroller({ 
    containerID: "header", 
    scrollSpeed: 70, //Speed in milliseconds 
    imageHeight: 4300, //Background image height 
    headerHeight: 300, //How tall the header is. 
}); 
var otherScroller = new bgScroller({ 
    containerID: "myOtherDiv", 
    scrollSpeed: 30, //Speed in milliseconds 
    imageHeight: 2800, //Background image height 
    headerHeight: 200, //How tall the header is. 
}); 

我已经包含了三种公共方法; .reset()，.start()和.stop()，其在实例化之后提供对滚动器的有限控制。使用方法如下：

• headerScroller.stop();
• headerScroller.reset();
• headerScroller.start();

注：

• 工作演示here。
• 依赖关系：jQuery的1.0或更高版本
• .reset()电话.stop()自动所以没有必要调用.stop()提前。
• 没有规定在实例化之后更改设置，但这可能需要多一点思考。
• jQuery插件会很相似，但需要一点时间来开发（几乎没有优势）。