首頁 > 文章 > web前端 > jquery實作頁面百葉窗走馬燈式翻滾顯示效果的方法_jquery

jquery實作頁面百葉窗走馬燈式翻滾顯示效果的方法_jquery

WBOY原創: 2016-05-16 16:10:061240瀏覽

本文實例講述了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));
                            //移動第一個元素到最後

                            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 ">");

            u.css({"overflow":"hidden","height":h "px","margin-bottom":"15px"});

            for(var i=0;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 稱為;

            };

        };

        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));