0

したがって、このjqueryバックグラウンドスクローラーを使用しています。基本的に、同じページに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 には別の速度が必要です。

4

1 に答える 1

0

@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.
});

3 つの public メソッドを含めました。.reset()、.start()および.stop()、インスタンス化後のスクローラーに対する限定的な制御を提供します。次のように使用します。

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

ノート：

  • 作業デモはこちら。
  • 依存関係: jQuery 1.0 以降
  • .reset()自動的に呼び出されるため、事前.stop()に電話する必要はありません。.stop()
  • インスタンス化後に設定を変更するための規定はありませんが、もう少し考えれば可能です。
  • jQuery プラグインも同様ですが、開発に少し時間がかかります (利点はほとんどありません)。
于 2012-05-02T00:27:31.997 に答える