需要在同一页面上使用多个相同的jQuery效果
Need more than one of the same jQuery effect on same page
所以我正在使用这个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 的速度不同。
@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;
}
参数作为对象文本"map"的属性传递,覆盖构造函数中的硬编码默认值。对于未包含的任何参数,将使用默认值。这里有几个例子:
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();
笔记:
- 在这里工作演示。
- 依赖项:jQuery 1.0 或更高版本
-
.reset()
呼叫会自动.stop()
,因此无需事先致电.stop()
。 - 没有规定在实例化后更改设置,但这可以通过多考虑一下来实现。
- jQuery插件将类似,但需要更多的时间来开发(几乎没有优势(。
相关文章:
- 为什么不在浏览器上获得JQuery效果呢
- Rails-jQuery 为什么我必须单击两次才能显示 jQuery 效果
- 每次鼠标悬停触发一次 jquery 效果
- 对 jquery 效果应用自定义操作
- 鼠标点击时停止jquery效果's停止
- 在 scrollTop 上应用 Jquery 效果时遇到问题
- 为什么jQuery效果在我的手机上不起作用,但在我的桌面上工作
- 将自定义 JavaScript/jQuery 效果添加到 MVC 3 表单验证中
- jQuery 效果在 Wordpress 模板文件中不起作用
- 如何在用户可视化页面点时启动 jQuery 效果
- 需要在同一页面上使用多个相同的jQuery效果
- 无法将 jquery 效果函数应用于动态创建的元素
- 仅在单击时将 jQuery 效果添加到 HTML 元素父级
- 如何减慢这种 JQuery 效果
- 如何使用javascript切换某些jquery效果
- 用于加载的JQuery效果/动画
- 如果有多个元素被动画化,如何知道jquery效果何时结束
- jQuery效果:我哪里出错了
- 使用淡入淡出滚动jQuery效果的2列浮动画廊
- 加载后Jquery效果消失