在同一頁面上需要多個相同的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插件會很相似，但需要一點時間來開發（幾乎沒有優勢）。