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:
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 ">" 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
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