国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁(yè) > 編程 > JavaScript > 正文

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

2019-11-20 12:58:26
字體:
來(lái)源:轉(zhuǎn)載
供稿:網(wǎng)友

本文實(shí)例講述了jquery實(shí)現(xiàn)頁(yè)面百葉窗走馬燈式翻滾顯示效果的方法。分享給大家供大家參考。具體如下:

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

復(fù)制代碼 代碼如下:
jQuery.fn.extend((
    function($){
        var l = 4,//卷動(dòng)行數(shù)
            t=5000,//卷動(dòng)完一次后,隔多長(zhǎng)時(shí)間下次開始卷動(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è)面可以是這樣子
復(fù)制代碼 代碼如下:
<div id="re" class="dynamic">
 <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ì)有所幫助。

發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 桃园县| 曲水县| 扎鲁特旗| 湘乡市| 绥中县| 庐江县| 拜泉县| 阆中市| 静乐县| 安乡县| 波密县| 塘沽区| 河曲县| 甘谷县| 柯坪县| 肃宁县| 临猗县| 筠连县| 依安县| 绵竹市| 婺源县| 石柱| 孟津县| 瑞金市| 河北省| 淄博市| 叙永县| 毕节市| 东光县| 清新县| 平武县| 屏东市| 石门县| 永康市| 齐齐哈尔市| 遵化市| 华安县| 灌阳县| 旺苍县| 鹤山市| 宕昌县|