jquery竖向走马灯_jquery实现页面百叶窗走马灯式翻滚显示效果的有效方法

1. 这里的代码需要jquery1.3以上的支持，如下所示：

复制代码 代码如下:jQuery.fn.extend((

function($){

var l = 4,//卷动行数

t=5000,//卷动完一次后，隔多长时间下次开始卷动

rt=500,//每个n卷动过去的耗时

n="li",//默认的卷动对象内包含的要卷动的HTML标记

o="ul",//如果卷动时，启用的`包裹卷动元素的HTML标记

e,//调用对象

en,//调用对象内所有的要卷动的对象集合

h;//卷动行高度

var vLimit=80;//比视觉极限0.1s还小点

var maxRnum=Math.ceil(rt/vLimit);//最大卷动次数

var maxRh=0;//每次卷动高度

var fnRollFirst=function(arg){//将arg向上卷1个n，完成之后将第1个n移动到最后一个位置

var rCount=0;//卷动次数纪录

var rVal=setInterval(function(){//每隔vLimit循环一次，共循环maxRnum-1次

rCount++;

arg.scrollTop(arg.scrollTop()+maxRh);

if(rCount>=(maxRnum-1)){//少卷1次

clearInterval(rVal);

arg.scrollTop(arg.scrollTop()+h-maxRh*(maxRnum-1));//最后1次修正卷动值

//移动第一个元素到最后

var nowN=arg.children(n);

nowN.eq(nowN.length-1).after(nowN.eq(0));

//第一个位置空出后需要通过倒卷修正回来

arg.scrollTop(-h);

};

},vLimit);

};

var fnRollArr=function(arg){//对数组中的对象逐一启动卷动

var out=setInterval(function(){

fnRollFirst(arg.shift());

if(!arg.length){

clearInterval(out);

};

},rt);

};

var fnRoll=function(){//获得需要逐个卷动的对象集合

var arr=new Array();

e.children(o).each(function(){

var rn=$(this).children(n);

if(rn.length>1){

arr.push($(this));

};

});

setInterval(function(){

fnRollArr(arr.slice(0));

},t);

};

var fnLay=function(){//布局页面

h=en.height();

var nu=Math.ceil(en.length/l);

var u=$("");

u.css({"overflow":"hidden","height":h+"px","margin-bottom":"15px"});

for(var i=0;i

en.slice(nu*i,nu*(i+1)).wrapAll(u);

};

};

var fnMain=function(){//卷动主方法

if(maxRnum>1){

fnLay();

maxRh=Math.ceil(h/maxRnum);

fnRoll();

};

};

var fnStart= function(arg){//初始化显示方式

e=arg;

en = e.children(n);

en.show();

if(en.length>l){

fnMain();

}else{

return false;

};

};

return {

setLine : function(num){//设置要分成多少行来卷动

(!isNaN(num) && num>0)";

return this;

},

setTime : function(num){//卷动间隔时间:毫秒

(!isNaN(num) && num>0)";

return this;

},

startRoll : function(){//启动卷动

fnStart(this);

}

};

}

)(jQuery));

2. 页面可以是这样子

复制代码 代码如下:

//$("#re").setLine(5).setTime(3000).startRoll();

//简单的调用

$("#re").startRoll();

【jquery实现页面百叶窗走马灯式翻滚显示效果的有效方法】相关文章：