Heim  >  Artikel  >  Web-Frontend  >  jquery-Methode, um den rotierenden Anzeigeeffekt der Seite blinds_jquery zu erzielen

jquery-Methode, um den rotierenden Anzeigeeffekt der Seite blinds_jquery zu erzielen

WBOY
WBOYOriginal
2016-05-16 16:10:061238Durchsuche

Das Beispiel in diesem Artikel beschreibt die Methode zur Verwendung von JQuery, um den Scroll-Anzeigeeffekt von Seitenblenden zu erzielen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1. Der Code hier erfordert die Unterstützung von jquery1.3 oder höher, wie unten gezeigt:

Code kopieren Der Code lautet wie folgt:
jQuery.fn.extend((
Funktion($){
      var l = 4,//Anzahl der Bildlaufzeilen
            t=5000,//Wie lange dauert es nach dem ersten Scrollen, bis das nächste Mal mit dem Scrollen begonnen wird?
              rt=500,//Verstrichene Zeit für jedes n Scrollen
n="li",//Das zu scrollende HTML-Tag
, das im Standard-Scroll-Objekt enthalten ist o="ul",//Beim Scrollen wird das HTML-Tag
aktiviert, das das Scroll-Element umschließt               e,//Objekt aufrufen
de,//Rufen Sie die Sammlung aller Objekte auf, die im Objekt gescrollt werden sollen
             h;//Zeilenhöhe scrollen
        var vLimit=80;//Etwas kleiner als die visuelle Grenze von 0,1s
        var maxRnum=Math.ceil(rt/vLimit);//Maximale Anzahl an Scrolls
          var maxRh=0; // Jede Bildlaufhöhe
            var fnRollFirst=function(arg){//Arg um 1 n hochrollen und nach Abschluss das erste n an die letzte Position verschieben
               var rCount=0; //Scroll count record
                var rVal=setInterval(function(){//Schleife jedes vLimit, insgesamt maxRnum-1 mal
rCount ;
                           arg.scrollTop(arg.scrollTop() maxRh);
If(rCount>=(maxRnum-1)){//1 weniger Volumen
;                                                                                           arg.scrollTop(arg.scrollTop() h-maxRh*(maxRnum-1));//Der zuletzt geänderte Bildlaufwert
//Das erste Element ans Ende verschieben
                                                                       var nowN=arg.children(n);
nowN.eq(nowN.length-1).after(nowN.eq(0));
//Die erste Position muss durch Zurückspulen korrigiert werden, nachdem sie geräumt wurde
                                                                                                                                                                                                                                                                 };                          },vLimit);
        };
        var fnRollArr=function(arg){//Beginnen Sie mit dem Scrollen nacheinander für die Objekte im Array
          var out=setInterval(function(){
                         fnRollFirst(arg.shift());
If(!arg.length){
;                 };
             },rt);                                                      };
        var fnRoll=function(){//Rufen Sie die Sammlung von Objekten ab, die einzeln gescrollt werden müssen
            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-Seite
              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-Hauptmethode
If(maxRnum>1){
                        fnLay();
                      maxRh=Math.ceil(h/maxRnum);
                       fnRoll();
            };
        };
        var fnStart= function(arg){//Anzeigemodus initialisieren
             e=arg;
              en = e.children(n);
               en.show();
If(en.length>l){
                         fnMain();
               }sonst{
                       return false;
            };
        };
         return {
​​​​​​ setLine: function(num){//Legen Sie fest, in wie viele Zeilen beim Scrollen unterteilt werden soll
(!isNaN(num) && num>0)?l=num:"";
                   gib dies zurück;
            },
​​​​​​ setTime: function(num){//Scrollintervall: Millisekunden
(!isNaN(num) && num>0)?t=num:"";
                   gib dies zurück;
            },
              startRoll: function(){//Scrollen beginnen
                                      fnStart(this);
            }
        };
}
)(jQuery));

2. Die Seite kann so aussehen
Code kopieren Der Code lautet wie folgt:

 

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

  •  

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

  •  

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

  •  

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

  •  

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

  •  

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

  •    
     

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

  •  

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

  •  

  •      三内里奥评论经验:
        
     

  •  

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

  •  

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

  •  

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

  •  

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

  •   
     

  •      李飞已正式成为经验达人
     

  •  

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

  •  

  •      三内里奥评论经验:
        
     

  •  

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

  •  

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

  •  

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

  •  

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

  •     
     

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

  •  

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

  •  

  •      三内里奥评论经验:
        
     

  •  

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

  •  

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

  •  

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


  • Sannerio beantwortete Da Feis Frage



  • Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.

    Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn