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程式設計有所協助。