jquery method to achieve the revolving display effect of page blinds_jquery

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

2. The page can look like this

Copy code The code is as follows:

 

     李飞正在申请成为经验达人
 

 

     李飞已向职场专题《我是个亚太人呀亚太人》投稿
 

 

     董川民已成功购买职场专题《我是个亚太人呀亚太人》
 

 

     李飞对《我是个亚太人呀亚太人》的解决方案又卖出一次
 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

   
 

     李飞向职场专题《我是个亚太人呀亚太人》的投稿已通过审核，获得1元奖励。
 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥评论经验：
    

人生感悟及处事技巧人生感悟及处事

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

  
 

     李飞已正式成为经验达人
 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥评论经验：
    

人生感悟及处事技巧人生感悟及处事

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

    
 

     李飞已邀请董川民成为经验达人
 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥评论经验：
    

人生感悟及处事技巧人生感悟及处事

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

 

 

     三内里奥回答了大飞的提问
    

人生感悟及处事技巧人生感悟?

Sannerio answered Da Fei's question

Life insights and handling skills Life insights?

I hope this article will be helpful to everyone’s jQuery programming.