jquery實(shí)現(xiàn)頁面百葉窗走馬燈式翻滾顯示效果的有效方法

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

　　復(fù)制代碼 代碼如下:jQuery.fn.extend((

　　function($){

　　var l = 4,//卷動行數(shù)

　　t=5000,//卷動完一次后，隔多長時間下次開始卷動

　　rt=500,//每個n卷動過去的耗時

　　n="li",//默認(rèn)的卷動對象內(nèi)包含的要卷動的HTML標(biāo)記

　　o="ul",//如果卷動時，啟用的包裹卷動元素的HTML標(biāo)記

　　e,//調(diào)用對象

　　en,//調(diào)用對象內(nèi)所有的要卷動的對象集合

　　h;//卷動行高度

　　var vLimit=80;//比視覺極限0.1s還小點(diǎn)

　　var maxRnum=Math.ceil(rt/vLimit);//最大卷動次數(shù)

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

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

　　var rCount=0;//卷動次數(shù)紀(jì)錄

　　var rVal=setInterval(function(){//每隔vLimit循環(huán)一次，共循環(huán)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){//對數(shù)組中的對象逐一啟動卷動

　　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){//設(shè)置要分成多少行來卷動

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

　　return this;

　　},

　　setTime : function(num){//卷動間隔時間:毫秒

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

　　return this;

　　},

　　startRoll : function(){//啟動卷動

　　fnStart(this);

　　}

　　};

　　}

　　)(jQuery));

　　2. 頁面可以是這樣子

　　復(fù)制代碼 代碼如下:

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

　　//簡單的調(diào)用

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

【jquery實(shí)現(xiàn)頁面百葉窗走馬燈式翻滾顯示效果的有效方法】相關(guān)文章：

設(shè)置雙顯示器顯示的方法11-17

顯示器的維護(hù)方法06-29

2017最新網(wǎng)站專題頁面SEO優(yōu)化方法07-16

有效激勵員工的方法09-05

有效學(xué)習(xí)古箏的方法11-17

夏季護(hù)發(fā)的有效方法09-03

男士健身有效計劃方法09-04

跳繩有效的訓(xùn)練方法03-14

談聲樂有效教學(xué)的方法07-07

移動硬盤無法顯示解決方法12-29