這篇文章主要介紹了jquery實現頁面百葉窗走馬燈式翻滾顯示效果的方法,實例分析了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=$("<"+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(){//卷動主方法
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)?l=num:"";
return this;
},
setTime : function(num){//卷動間隔時間:毫秒
(!isNaN(num) && num>0)?t=num:"";
return this;
},
startRoll : function(){//啟動卷動
fnStart(this);
}
};
}
)(jQuery));
2. 頁面可以是這樣子
代碼如下:
<div id="re" class="dynamic">
<li>
<a href="#" class="name">李飛</a>正在申請成為經驗達人
</li>
<li>
<a href="#" class="name">李飛</a>已向職場專題《<a href="">我是個亞太人呀亞太人</a>》投稿
</li>
<li>
<a href="#" class="name">董川民</a>已成功購買職場專題《<a href="#">我是個亞太人呀亞太人</a>》
</li>
<li>
<a href="#" class="name">李飛</a>對《<a href="">我是個亞太人呀亞太人</a>》的解決方案又賣出一次
</li>
<li>
<a href="#" class="name">三內裡奧</a>回答了<a href="#" class="name">大飛</a>的提問
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內裡奧</a>回答了<a href="#" class="name">大飛</a>的提問
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">李飛</a>向職場專題《<a href="#">我是個亞太人呀亞太人</a>》的投稿已通過審核，獲得1元獎勵。
</li>
<li>
<a href="#" class="name">三內裡奧</a>回答了<a href="#" class="name">大飛</a>的提問
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內裡奧</a>評論經驗：
<div class="text"><a href="">人生感悟及處事技巧人生感悟及處事</a></div>
</li>
<li>
<a href="#" class="name">三內裡奧</a>回答了<a href="#" class="name">大飛</a>的提問
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內裡奧</a>回答了<a href="#" class="name">大飛</a>的提問
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內裡奧</a>回答了<a href="#" class="name">大飛</a>的提問
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內裡奧</a>回答了<a href="#" class="name">大飛</a>的提問
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">李飛</a>已正式成為經驗達人
</li>
<li>
<a href="#" class="name">三內裡奧</a>回答了<a href="#" class="name">大飛</a>的提問
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內裡奧</a>評論經驗：
<div class="text"><a href="">人生感悟及處事技巧人生感悟及處事</a></div>
</li>
<li>
<a href="#" class="name">三內裡奧</a>回答了<a href="#" class="name">大飛</a>的提問
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內裡奧</a>回答了<a href="#" class="name">大飛</a>的提問
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內裡奧</a>回答了<a href="#" class="name">大飛</a>的提問
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內裡奧</a>回答了<a href="#" class="name">大飛</a>的提問
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">李飛</a>已邀請<a href="#" class="name">董川民</a>成為經驗達人
</li>
<li>
<a href="#" class="name">三內裡奧</a>回答了<a href="#" class="name">大飛</a>的提問
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內裡奧</a>評論經驗：
<div class="text"><a href="">人生感悟及處事技巧人生感悟及處事</a></div>
</li>
<li>
<a href="#" class="name">三內裡奧</a>回答了<a href="#" class="name">大飛</a>的提問
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內裡奧</a>回答了<a href="#" class="name">大飛</a>的提問
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內裡奧</a>回答了<a href="#" class="name">大飛</a>的提問
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
<li>
<a href="#" class="name">三內裡奧</a>回答了<a href="#" class="name">大飛</a>的提問
<div class="text"><a href="">人生感悟及處事技巧人生感悟?</a></div>
</li>
</div>
<script type="text/javascript">
//復雜點的調用寫法
//$("#re").setLine(5).setTime(3000).startRoll();
//簡單的調用
$("#re").startRoll();
</script>
希望本文所述對大家的jQuery程序設計有所幫助。