Einführung in die Implementierung von $.fn und Bildlaufeffekten in jquery

Dieser Artikel stellt hauptsächlich die Implementierung von $.fn und Bildlaufeffekten in jquery vor. Jetzt kann ich ihn mit Ihnen teilen

Vorwort

Ich glaube, jeder kennt den Bildlaufeffekt, wie unten gezeigt. Der js-Implementierungscode ist sehr kurz, aber wenn Sie möchten Um dies zu erreichen, müssen Sie die Grundlagen von jquery, IIFE, setInterval und der Verwendung von $.fn beherrschen:

$.fn-Verwendung in jquery

$.fn ist der Namespace von jquery. Wenn Sie den jquery-Quellcode studiert haben, ist es nicht schwierig, den folgenden Code im Quellcode zu finden:

jquery.fn=jquery.prototype={
 init:function(selector,context){
 /*
 *code
 */
 }
}

Also jquery.fn ist die Abkürzung von jquery.prototype. Die von unserem Quellcode aufgerufene Konstruktor-jquery（）-Instanz ist tatsächlich eine Instanz von jquery.fn.init（）.

Der Code lautet wie folgt:

jQuery = function( selector, context ) {
 //jqeruy内部使用new创建返回另一个构造函数实力是为了省去调用jquery时前面的new，并在后面定义了别名$;
 //构造函数jquery()调用的是构造函数jQuery.fn.init()的实例
 return new jQuery.fn.init( selector, context );
},/*code*/

Danach wird der nachfolgende Code ausgeführt jquery.fn.init.prototype=jquery.fn, mit Der Prototyp des Konstruktors jquery Das Objekt überschreibt das Prototypobjekt von jquery.fn.init(), sodass jquery.fn.init-Instanzen auch auf die Prototypmethoden und -eigenschaften von jquery() zugreifen können.

So entwickeln Sie Plug-Ins: Verwenden Sie $.fn, um jquery zu erweitern, um neue Methoden zu generieren.

1. Sie können jquery.extend(object) verwenden, um die JQuery-Klasse selbst zu erweitern und der Klasse neue Methoden hinzuzufügen.

2. Verwenden Sie jquery.fn.extend(object), um Methoden zum JQuery-Objekt hinzuzufügen.

Im Folgenden wird jquery.extend(object) verwendet, um die JQuery-Klasse zu erweitern und Klassenmethoden hinzuzufügen:

$.extent({ 
 add: function(a,b){
 return a+b;
 }
})

Sie können es direkt in verwenden die Zukunft$.add(1,2);//3

Als nächstes verwenden Sie jquery.fn.extend(object), um eine Methode auf jquery.prototype zu erweitern.

$.fn.extend({
 [函数名]：fucntion(){
 /*code*/
 }
});

Sie können $(“p”). function name() in Zukunft direkt verwenden.

Verwenden Sie $.fn in jquery, um ein Plug-in zum Scrollen von Bildern zu kapseln

Dies ist ein weit verbreitetes Plug-in, das unnötig ist zu sagen: Auch wissen, was es ist. Doch wie Sie es konkret umsetzen, lesen Sie weiter unten. Der wichtigste Teil dieses Plug-Ins ist die Implementierung von js. HTML und CSS sind sehr einfach und werden nicht im Detail beschrieben. Wenn Sie mit einigen der folgenden Wissenspunkte bereits vertraut sind, können Sie diese optional überspringen.

setInterval()

setInterval()Sie können die Funktion kontinuierlich zum angegebenen Zeitpunkt aufrufen, bis clearInterval aufgerufen oder das Fenster geschlossen wird.

setInterval(fucntion(){/*code*/},[time])
clearInterval(val_of_seInterval)//参数为setInterval的返回值

Wenn wir also das Bild scrollen lassen und sich der Mauszeiger auf dem Bild befindet, um das Scrollen des Bildes zu stoppen, ist die Einstellung hier sehr einfach Fügen Sie ein on(‘mouseup,mouseover',fucntion(){})Ereignis hinzu.

Der spezifische Implementierungscode lautet wie folgt:

var time=setInterval(picTime,par.time);
/*
*code
*/
$(this).on('mouseup,mouseover',fucntion(){
 clearInterval(time);
 })

Stellen Sie sicher, dass Das Bild kann kontinuierlich scrollen

Beim Entwerfen möchten wir auf keinen Fall, dass die Bilder nach dem Scrollen verschwinden li.length. Legen Sie also einen Sentinel-Index fest.

var index=0;
fucntion picTime(){
 index++;
 if(index=li.length){
 index=0;
 }
 showpicture(index);
}

In ähnlicher Weise müssen wir beim Klicken auf das vorherige oder nächste Bild auch einen Wachposten festlegen, damit die Schleife fortgesetzt werden kann.

IIFE

Sie möchten auf jeden Fall, dass der Plug-In-Effekt sofort beim Laden des Browsers angezeigt wird, nachdem das Plug-In aufgerufen wurde die Definition. Dann müssen Sie IIFE verwenden, um dieses Plug-In zu erstellen, um ein schnelles Laden zu erreichen und nicht durch andere Codes beeinträchtigt zu werden. Da die Funktionsdeklaration in Klammern in js ungültig ist, wird die in Klammern eingeschlossene Funktion als Funktionsausdruck bezeichnet.

Die beiden Formen von IIFE sind wie folgt: Wenn am Ende einer anonymen Funktion Klammern erscheinen und Sie eine Funktion aufrufen möchten, wird die Funktion standardmäßig als Funktionsdeklaration verwendet. Wenn eine Funktion in Klammern eingeschlossen wird, wird die Funktion standardmäßig als Ausdruck und nicht als Funktionsdeklaration geparst.

(function(){}());
(function(){})();

Lassen Sie uns zunächst eine Frage von Niuke verwenden, um IIFE zu verstehen:

var myObject = { 
 foo: "bar", 
 func: function() { 
 var self = this; 
 console.log(this.foo); 
 console.log(self.foo); 
 (function() { 
 console.log(this.foo); 
 console.log(self.foo); 
 }()); 
}};
 myObject.func();

Weil Dies bezieht sich auf das myObject-Objekt, das erste gibt definitiv bar aus, und self ist die Variable davon, die diesem entspricht, also wird das zweite Objekt bar ausgegeben. Das ist das erste, das wir oben definiert haben Zu diesem Zeitpunkt muss die anonyme Funktion sofort ausgeführt werden. Dies zeigt auf das Fenster, sodass die Ausgabe nicht in ihrem eigenen Bereich auf Blockebene definiert ist nach oben gefunden, so dass der vierte Ausgang immer noch bar ist.

Version des JS-Codes für Bildspezialeffekte mit niedriger Konfiguration

Viele haben Kommentare hinzugefügt: Wenn Sie über solide Kenntnisse in JQuery und JS verfügen, Das ist es definitiv nicht. Es ist schwer.

rrree

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Bitte achten Sie auf PHP Chinesische Website!

Verwandte Empfehlungen:

jQuery realisiert den ziehbaren Wunschwandeffekt

jQuery und Canvas realisieren den flachen Wurf und die Farbdynamik der Kugel Transformationseffekt

Einführung in ein einfaches jQuery-Diashow-Plug-in (jquery-slider) basierend auf JSON-Formatdaten

Das obige ist der detaillierte Inhalt vonEinführung in die Implementierung von $.fn und Bildlaufeffekten in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!