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=$("<"+o+">");

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

　　for(var i=0;i<l;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实现页面百叶窗走马灯式翻滚显示效果的有效方法】相关文章：

设置双显示器显示的方法11-17

显示器的维护方法06-29

2017最新网站专题页面SEO优化方法07-16