同じページに複数の同じjQueryエフェクトが必要

Question

このjqueryバックグラウンドスクロールを使用していますので、基本的に同じページ（2つ以上の異なるスピード）で2つ以上を取得したいのですが、どうやってするの。

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、ここではトム・ティーの考えが盛り込まれています。つまり、あなたが複数のインスタンスをインスタンス化することができ、そこから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. 
}); 

私は3つのパブリックメソッドを含んでいます。 .reset(),.start()および.stop()であり、インスタンス化後のスクロールの制御が制限されています。

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

注：デモhere作業

• を次のように使用します。
• 依存性：事前に.stop()コールする必要はありませんので、jQueryの1.0以降
• .reset()は自動的に.stop()を呼び出します。
• インスタンス化後に設定を変更するための規定はありませんが、もう少し考えれば可能です。
• jQueryプラグインは似ていますが、開発に少し時間がかかります（ほとんど利点はありません）。