Durch jQuery slidereveal_jquery implementierter Panel-Slide-Side-Display-Effekt

Wir verwenden ein jQuery-Plug-in: slidereveal.js, mit dem die linken und rechten Schiebe- und Ausblendeffekte des Panels gesteuert werden können. Projektadresse: https://github.com/nnattawat/. slideReveal.

Anwendung

Laden Sie zunächst die JQuery-Bibliotheksdatei und das Slidereveal.js-Plug-In auf der Seite.

Code kopieren Der Code lautet wie folgt:

Platzieren Sie dann ein Panel-Element wie z. B. div#slider mit benutzerdefiniertem Inhalt im Textkörper und platzieren Sie ein Element, das den Panel-Aufruf auslöst, z. B. eine Schaltfläche oder ein Element.

Code kopieren Der Code lautet wie folgt:

Helloweba heißt Sie willkommen!

Nach links erweitern


Zum Schluss rufen Sie direkt das Plug-In slidereveal.js auf. Der Code lautet wie folgt:

Code kopieren

Der Code lautet wie folgt: $('#slider').slideReveal({ Auslöser: $("#trigger") });

Optionseinstellungen

Standardmäßig gleitet das Bedienfeld von links nach außen und „schiebt“ den Inhalt der Hauptseite nach rechts. Das Bedienfeld kann mit der „ESC“-Taste der Tastatur geschlossen werden.

Eigenschaften	Beschreibung	Standardwert
Breite	Integer-Typ, Panelbreite.	250
drücken	Boolean, auf „true“ gesetzt, verschiebt das Panel den Hauptinhalt der Seite, wenn es erweitert wird. Wenn es auf „false“ gesetzt ist, wird das Panel über den Hauptinhalt der Seite erweitert.	wahr
Position	String, legen Sie die Richtung der Panelausdehnung und -verschiebung fest, die auf „links“ oder „rechts“ eingestellt werden kann	"links"
Geschwindigkeit	Ganzzahl, Panel-Erweiterungsgeschwindigkeit, Einheit: Millisekunden.	300
Auslöser	jQuery DOM-Selektor, legt Seitenelemente fest, die das Ein- und Ausblenden des Panels auslösen können, z. B. $("#element")	Undefiniert
autoEscape	Boolescher Typ, legt fest, ob die Verwendung der ESC-Taste der Tastatur zum Ausblenden des erweiterten Bedienfelds zulässig ist.	wahr
oben	Ganzzahl, legt den Abstand zwischen dem Panel und dem oberen Teil des Fensters fest.	0
zeigen	Rückruffunktion, die aufgerufen wird, wenn das Panel erweitert wird.	-
angezeigt	Rückruffunktion, die aufgerufen wird, wenn das Panel erweitert wird.	-
ausblenden	Rückruffunktion, die aufgerufen wird, wenn das Panel ausgeblendet ist.	-
zeigen	Rückruffunktion, die aufgerufen wird, wenn das Panel ausgeblendet ist.	-

Das slidereveal.js-Plug-in bietet auch Erweiterungs- und Ausblendungsmethodenaufrufe. Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

//Panel erweitern
$('#slider').slideReveal("show");
//Panel ausblenden
$('#slider').slideReveal("hide");

Das Obige ist der gesamte Inhalt, der in diesem Artikel mit Ihnen geteilt wird. Freunde in Not können sich darauf beziehen. Ich hoffe, dass es für alle hilfreich ist, sich mit jQuery vertraut zu machen.