一、jquery.roll 插件使用说明
jquery.roll 是模拟百度新闻不间断滚动效果，并支持文字、图片水平垂直滚动，该函数使用方法为：
复制代码 代码如下:
/*
* @module jquery roll
* @param: contentcls 内容容器classname
* @param: contentparentid 内容容器父元素节点id
* @param: configs 配置参数
*
* @config: effect 滚动效果
* @config: duration 滚动1个像素的运行时间(毫秒数)
* @config: delay 开始滚动的延迟时间(毫秒数)
*
*/
jquery.roll(contentcls, contentparentid, configs);
二、函数源码
复制代码 代码如下:
jquery.extend({
roll: function(contentcls, contentparentid, configs){
var settimeid, totalwidth = 0, totalheight = 0,
firstcontent, secondcontent, contents;
(function(){
var singlecontent, clonecontent, nodelist;
singlecontent = $(contentcls, contentparentid);
nodelist = singlecontent.children();
if (configs.effect === 'scrollx') {
$.each(nodelist, function(idx, itm) {
totalwidth += $(itm).outerwidth(true);
});
singlecontent.css({ 'width': totalwidth + 'px' });
}
else if (configs.effect === 'scrolly') {
$.each(nodelist, function(idx, itm) {
totalheight += $(itm).outerheight(true);
});
singlecontent.css({ 'height': totalheight + 'px' });
}
clonecontent = singlecontent.clone();
clonecontent.appendto(contentparentid);
contents = $(contentcls, contentparentid);
firstcontent = contents[0];
secondcontent = contents[1];
if (configs.effect === 'scrollx') {
$(firstcontent).css({ 'left': 0 });
$(secondcontent).css({ 'left': totalwidth + 'px' });
}
else if (configs.effect === 'scrolly') {
$(firstcontent).css({ 'top': 0 });
$(secondcontent).css({ 'top': totalheight + 'px' });
}
})()
function cssanimate(){
if (configs.effect === 'scrollx') {
$(firstcontent).css({ left: parseint(firstcontent.style.left, 10) - 1 + 'px' });
$(secondcontent).css({ left: parseint(secondcontent.style.left, 10) - 1 + 'px' });
$.each(contents, function(idx, itm) {
if (parseint(itm.style.left,10) === -totalwidth) {
$(itm).css({ left: totalwidth + 'px' });
}
});
}
else if (configs.effect === 'scrolly') {
$(firstcontent).css({ top: parseint(firstcontent.style.top, 10) - 1 + 'px' });
$(secondcontent).css({ top: parseint(secondcontent.style.top, 10) - 1 + 'px' });
$.each(contents, function(idx, itm) {
if (parseint(itm.style.top,10) === -totalheight) {
$(itm).css({ top: totalheight + 'px' });
}
});
}
settimeid = settimeout(cssanimate, configs.duration);
}
function rollrun(){
settimeid = settimeout(cssanimate, configs.delay);
return jquery;
}
function rollstop(){
cleartimeout(settimeid);
return jquery;
}
return $.extend({
rollrun: rollrun,
rollstop: rollstop
});
}
});
三、完整demo源码
例3.1
复制代码 代码如下: