[英]Need more than one of the same jQuery effect on same page
So I'm using this jquery background scroller, basically I want to get more than two on the same page (going at different speeds) and I can't figure out how to do it. 所以我正在使用这个jquery后台滚动器,基本上我想在同一页面上获得两个以上(以不同的速度运行),但我不知道该怎么做。
http://www.devirtuoso.com/2009/07/how-to-build-an-animated-header-in-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);
I can add in other css to the script but I want a different speed for other divs. 我可以在脚本中添加其他CSS,但我希望其他div的速度有所不同。
@andy, here is Tom Th's idea worked up; @andy,这是Tom Th的想法付诸实践的; ie a js constructor function, from which you can instantiate multiple instances :
即一个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;
}
Parameters are passed as properties of an object literal "map", overriding the hard-coded defaults in the constructor. 参数作为对象文字“ map”的属性传递,覆盖了构造函数中的硬编码默认值。 For any parameters not included, the default values will be used.
对于未包含的任何参数,将使用默认值。 Here's a couple of examples :
这里有几个例子:
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.
});
I have included three public methods; 我包括了三种公共方法;
.reset()
, .start()
and .stop()
, which provide limited control over scrollers after instantiation. .reset()
.start()
和.stop()
其提供了优于实例化之后的滚动条有限的控制。 Use as follows: 用法如下:
headerScroller.stop();
headerScroller.reset();
headerScroller.start();
Notes: 笔记:
.reset()
calls .stop()
automatically so there's no need to call .stop()
beforehand. .reset()
自动调用.stop()
因此无需事先调用.stop()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.