jquery實(shí)現(xiàn)頁(yè)面百葉窗走馬燈式翻滾顯示效果的方法
本文實(shí)例講述了jquery實(shí)現(xiàn)頁(yè)面百葉窗走馬燈式翻滾顯示效果的方法。分享給大家供大家參考。具體如下:
1. 這里的代碼需要jquery1.3以上的支持,如下所示:
function($){
var l = 4,//卷動(dòng)行數(shù)
t=5000,//卷動(dòng)完一次后,隔多長(zhǎng)時(shí)間下次開(kāi)始卷動(dòng)
rt=500,//每個(gè)n卷動(dòng)過(guò)去的耗時(shí)
n="li",//默認(rèn)的卷動(dòng)對(duì)象內(nèi)包含的要卷動(dòng)的HTML標(biāo)記
o="ul",//如果卷動(dòng)時(shí),啟用的包裹卷動(dòng)元素的HTML標(biāo)記
e,//調(diào)用對(duì)象
en,//調(diào)用對(duì)象內(nèi)所有的要卷動(dòng)的對(duì)象集合
h;//卷動(dòng)行高度
var vLimit=80;//比視覺(jué)極限0.1s還小點(diǎn)
var maxRnum=Math.ceil(rt/vLimit);//最大卷動(dòng)次數(shù)
var maxRh=0;//每次卷動(dòng)高度
var fnRollFirst=function(arg){//將arg向上卷1個(gè)n,完成之后將第1個(gè)n移動(dòng)到最后一個(gè)位置
var rCount=0;//卷動(dòng)次數(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次修正卷動(dòng)值
//移動(dòng)第一個(gè)元素到最后
var nowN=arg.children(n);
nowN.eq(nowN.length-1).after(nowN.eq(0));
//第一個(gè)位置空出后需要通過(guò)倒卷修正回來(lái)
arg.scrollTop(-h);
};
},vLimit);
};
var fnRollArr=function(arg){//對(duì)數(shù)組中的對(duì)象逐一啟動(dòng)卷動(dòng)
var out=setInterval(function(){
fnRollFirst(arg.shift());
if(!arg.length){
clearInterval(out);
};
},rt);
};
var fnRoll=function(){//獲得需要逐個(gè)卷動(dòng)的對(duì)象集合
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(){//布局頁(yè)面
h=en.height();
var nu=Math.ceil(en.length/l);
var u=$("<"+o+"></"+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(){//卷動(dòng)主方法
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è)置要分成多少行來(lái)卷動(dòng)
(!isNaN(num) && num>0)?l=num:"";
return this;
},
setTime : function(num){//卷動(dòng)間隔時(shí)間:毫秒
(!isNaN(num) && num>0)?t=num:"";
return this;
},
startRoll : function(){//啟動(dòng)卷動(dòng)
fnStart(this);
}
};
}
)(jQuery));
2. 頁(yè)面可以是這樣子
<li>
<a href="#" class="name">李飛</a>正在申請(qǐng)成為經(jīng)驗(yàn)達(dá)人
</li>
<li>
<a href="#" class="name">李飛</a>已向職場(chǎng)專題《<a href="">我是個(gè)亞太人呀亞太人</a>》投稿
</li>
<li>
<a href="#" class="name">董川民</a>已成功購(gòu)買職場(chǎng)專題《<a href="#">我是個(gè)亞太人呀亞太人</a>》
</li>
<li>
<a href="#" class="name">李飛</a>對(duì)《<a href="">我是個(gè)亞太人呀亞太人</a>》的解決方案又賣出一次
</li>
<li>
<a href="#" class="name">三內(nèi)里奧</a>回答了<a href="#" class="name">大飛</a>的提問(wèn)
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內(nèi)里奧</a>回答了<a href="#" class="name">大飛</a>的提問(wèn)
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">李飛</a>向職場(chǎng)專題《<a href="#">我是個(gè)亞太人呀亞太人</a>》的投稿已通過(guò)審核,獲得1元獎(jiǎng)勵(lì)。
</li>
<li>
<a href="#" class="name">三內(nèi)里奧</a>回答了<a href="#" class="name">大飛</a>的提問(wèn)
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內(nèi)里奧</a>評(píng)論經(jīng)驗(yàn):
<div class="text"><a href="">人生感悟及處事技巧人生感悟及處事</a></div>
</li>
<li>
<a href="#" class="name">三內(nèi)里奧</a>回答了<a href="#" class="name">大飛</a>的提問(wèn)
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內(nèi)里奧</a>回答了<a href="#" class="name">大飛</a>的提問(wèn)
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內(nèi)里奧</a>回答了<a href="#" class="name">大飛</a>的提問(wèn)
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內(nèi)里奧</a>回答了<a href="#" class="name">大飛</a>的提問(wèn)
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">李飛</a>已正式成為經(jīng)驗(yàn)達(dá)人
</li>
<li>
<a href="#" class="name">三內(nèi)里奧</a>回答了<a href="#" class="name">大飛</a>的提問(wèn)
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內(nèi)里奧</a>評(píng)論經(jīng)驗(yàn):
<div class="text"><a href="">人生感悟及處事技巧人生感悟及處事</a></div>
</li>
<li>
<a href="#" class="name">三內(nèi)里奧</a>回答了<a href="#" class="name">大飛</a>的提問(wèn)
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內(nèi)里奧</a>回答了<a href="#" class="name">大飛</a>的提問(wèn)
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內(nèi)里奧</a>回答了<a href="#" class="name">大飛</a>的提問(wèn)
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內(nèi)里奧</a>回答了<a href="#" class="name">大飛</a>的提問(wèn)
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">李飛</a>已邀請(qǐng)<a href="#" class="name">董川民</a>成為經(jīng)驗(yàn)達(dá)人
</li>
<li>
<a href="#" class="name">三內(nèi)里奧</a>回答了<a href="#" class="name">大飛</a>的提問(wèn)
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內(nèi)里奧</a>評(píng)論經(jīng)驗(yàn):
<div class="text"><a href="">人生感悟及處事技巧人生感悟及處事</a></div>
</li>
<li>
<a href="#" class="name">三內(nèi)里奧</a>回答了<a href="#" class="name">大飛</a>的提問(wèn)
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內(nèi)里奧</a>回答了<a href="#" class="name">大飛</a>的提問(wèn)
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內(nèi)里奧</a>回答了<a href="#" class="name">大飛</a>的提問(wèn)
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內(nèi)里奧</a>回答了<a href="#" class="name">大飛</a>的提問(wèn)
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
</div>
<script type="text/javascript">
//復(fù)雜點(diǎn)的調(diào)用寫法
//$("#re").setLine(5).setTime(3000).startRoll();
//簡(jiǎn)單的調(diào)用
$("#re").startRoll();
</script>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
基于jquery實(shí)現(xiàn)的移入頁(yè)面上空文本框時(shí),讓它變?yōu)榻裹c(diǎn),移出清除焦點(diǎn)
基于jquery實(shí)現(xiàn)的移入頁(yè)面上空文本框時(shí),讓它變?yōu)榻裹c(diǎn),移出清除焦點(diǎn)的實(shí)現(xiàn)代碼。2011-07-07超級(jí)酷和最實(shí)用的jQuery實(shí)例收集(20個(gè))
二十個(gè)超級(jí)酷和最實(shí)用的jQuery實(shí)例,對(duì)于使用和學(xué)習(xí)jquery的朋友是個(gè)不錯(cuò)的參考與學(xué)習(xí)資料。2010-04-04利用jQuery.Validate異步驗(yàn)證用戶名是否存在(推薦)
這篇文章主要介紹了利用jQuery.Validate異步驗(yàn)證用戶名是否存在的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12jQuery實(shí)現(xiàn)的手機(jī)發(fā)送驗(yàn)證碼倒計(jì)時(shí)效果代碼分享
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)手機(jī)注冊(cè)發(fā)送驗(yàn)證碼倒計(jì)時(shí)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-08-08jQuery事件綁定與解除綁定實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery事件綁定與解除綁定實(shí)現(xiàn)方法,實(shí)例分析了jQuery中bind與unbind方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04JQuery表格內(nèi)容過(guò)濾的實(shí)現(xiàn)方法
使用JQuery 實(shí)現(xiàn)一個(gè)表格內(nèi)容 過(guò)濾的功能,有需要的朋友可以參考一下,代碼如下:2013-07-07基于jquery的loading效果實(shí)現(xiàn)代碼
基于jquery的loading效果實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-11-11