jquery method to achieve the revolving display effect of page blinds

jquery method to achieve the revolving display effect of page blinds_jquery

WBOY

Release： 2016-05-16 16:10:06

Original

1339 people have browsed it

The example in this article describes the method of using jquery to achieve the scrolling display effect of page blinds. Share it with everyone for your reference. The details are as follows:

1. The code here requires the support of jquery1.3 or above, as shown below:

Copy code The code is as follows:

jQuery.fn.extend((

Function($){

      var l = 4,//Number of scrolling lines

            t=5000,//After scrolling once, how long will it take to start scrolling next time

              rt=500,//Elapsed time for each n scroll

n="li",//The HTML tag to be scrolled 
 contained in the default scroll object
o="ul",//If scrolling, the HTML tag 
 that wraps the scroll element is enabled
              e,//Call object

en,//Call the collection of all objects to be scrolled in the object

             h;//Scroll row height

        var vLimit=80;//Slightly smaller than the visual limit of 0.1s

        var maxRnum=Math.ceil(rt/vLimit);//Maximum number of scrolls

          var maxRh=0; // Each scroll height 

            var fnRollFirst=function(arg){//Roll up arg by 1 n, and after completion, move the first n to the last position 

               var rCount=0; //Scroll count record

                var rVal=setInterval(function(){//Loop every vLimit, for a total of maxRnum-1 times 

rCount ;

                           arg.scrollTop(arg.scrollTop() maxRh);

If(rCount>=(maxRnum-1)){//1 less volume

;
                                                                                                              arg.scrollTop(arg.scrollTop() h-maxRh*(maxRnum-1));//The last modified scroll value

//Move the first element to the end

                                                                        var nowN=arg.children(n);

nowN.eq(nowN.length-1).after(nowN.eq(0));

//The first position needs to be corrected by rewinding after it is vacated

                                                                             };
                         },vLimit);

        };

        var fnRollArr=function(arg){//Start scrolling one by one for the objects in the array

          var out=setInterval(function(){

                         fnRollFirst(arg.shift());

If(!arg.length){

;
                };

             },rt);                                              
        };
        var fnRoll=function(){//Get the collection of objects that need to be scrolled one by one

            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(){//Layout page

              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(){//Scroll main method

If(maxRnum>1){

                        fnLay();

                      maxRh=Math.ceil(h/maxRnum);

                       fnRoll();

            };

        };

        var fnStart= function(arg){//Initialize display mode

             e=arg;

              en = e.children(n);

               en.show();

If(en.length>l){

                         fnMain();

               }else{

                       return false;

            };

        };

         return {

​​​​​​ setLine: function(num){//Set how many lines to divide into for scrolling

(!isNaN(num) && num>0)?l=num:"";

                   return this;

            },

​​​​​​ setTime: function(num){//Scroll interval: milliseconds

(!isNaN(num) && num>0)?t=num:"";

                   return this;

            },

              startRoll: function(){//Start scrolling

                                      fnStart(this);

            }
        };

}

)(jQuery));