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

所以我使用这个jquery后台滚动程序，基本上我想在同一个页面上获得两个以上的页面（以不同的速度运行），但我不知道如何做到这一点

---

我可以在脚本中添加其他css，但我希望其他div的速度有所不同。

@andy，这是Tom Th的想法；ie是一个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;
}

我包括了三种公开方法

.reset（）

、

.start（）

和

.stop（）

，它们在实例化后对滚动条提供有限的控制。使用方法如下：

• headerScroller.stop（）

• headerScroller.reset（）

• headerScroller.start（）

注:

• 工作演示
• 依赖项：jQuery 1.0或更高版本

• .reset（）

  自动调用

  .stop（）

  ，因此无需事先调用

  .stop（）

• 没有规定在实例化后更改设置，但只要稍微考虑一下，这是可能的
• jQuery插件与之类似，但开发时间稍长（几乎没有优势）

---

你可以创建一个插件……我建议你看看jquery网站上的插件创作指南。为什么不将以上所有内容都考虑到它自己的对象中，然后你可以简单地实例化多个实例，传递滚动速度、div标记等？老实说，编写一个插件有点超出我的能力，我才刚刚开始使用jQuery。哇！多棒的回答啊，贝特鲁特。谢谢你。唯一的问题是，当我粘贴它时，我在这一行var current:0上得到一个代码错误，//当前像素行您必须原谅我，但您所说的大部分内容都超出了我的理解。现在已测试并调试。以上答案经过编辑以反映修订后的代码。请参阅注释中的演示链接。我无法以任何方式让它在JSFIDLE之外工作。下面是我的代码在JSFIDLE中工作得很好，可以根据我的喜好进行更改，但在我自己的文档中却不行？在JSFIDLE中，

onDomReady

framework设置在javaScript代码周围建立了一个不可见的包装器。在JSFIDLE之外，您也必须做同样的事情（但不是不可见的），方法是使用

$（function（）{…}）包装，其中，
…
是所有其他代码。这样做恐怕仍然不起作用(
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.
});