Jquery-Plug-in Der reichhaltige Popup-Layer-Effekt von Fancybox mit Quellcode download

Jquery-Plug-in Der reichhaltige Popup-Layer-Effekt von Fancybox mit Quellcode download_jquery

WBOY

Freigeben： 2016-05-16 15:28:19

Original

1101 Leute haben es durchsucht

Fancybox ist ein hervorragendes JQuery-Plug-In, das umfangreiche Popup-Ebeneneffekte anzeigen kann. Wir haben den Fancybox-Popup-Layer-Effekt bereits in einem Artikel vorgestellt. Im Vergleich zu Fancybox verfügt Fancybox über umfassendere Funktionen. Zusätzlich zum Laden von DIVs, Bildern, Bildersätzen und Ajax-Daten kann es auch SWF-Filme, Iframe-Seiten usw. laden .

Effektdemonstration Quellcode-Download

fancybox-Funktionen:

Kann Bilder, HTML-Text, Flash-Animationen, Iframe und Ajax-Unterstützung unterstützen
Sie können den CSS-Stil des Players anpassen Kann in Gruppen gespielt werden
Wenn das Mausrad-Plugin enthalten ist, kann fancybox auch das Scrollen mit dem Mausrad zum Durchblättern von Bildern unterstützen; Der Fancybox-Player unterstützt die Projektion und verleiht ihm ein dreidimensionaleres Gefühl.

Unterstützt die Pfeiltasten der Tastatur und die ESC-Taste.

Umfangreiche Parametereinstellungen und Methodenaufrufe.

Starke Skalierbarkeit.

Wie benutzt man? In diesem Artikel wird Demo2 in DEMO als Beispiel verwendet, um die Verwendung von Fancybox zu erläutern.

1. Fügen Sie Javascript-Referenzen und CSS-Dateireferenzen hinzu

<link rel="stylesheet" type="text/css" href="fancybox.css" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/fancybox.js"></script>

Nach dem Login kopieren

2. HTML

<h4>图片集，支持键盘方向键</h4> 
<p> 
 <a rel="group" href="images/b1.jpg" title="图片标题"><img alt="" src="images/s1.gif" /></a> 
 <a rel="group" href="images/b2.jpg" title="图片标题"><img alt="" src="images/s2.gif" /></a> 
 <a rel="group" href="images/b3.jpg" title="蓝天白云绿草"><img alt="" src="images/s3.gif" /></a> 
</p>

Nach dem Login kopieren

3. Rufen Sie fancybox an

Beachten Sie, dass das Parametereinstellungsformat von fancybox ist: 'key':'value'. titlePosition: Stellen Sie die Anzeigeposition des Bildtitels auf im Bild ein. zyklisch: Stellen Sie den Bild-Browsing-Modus auf zyklisches Browsen ein. titleFormat: Legen Sie das Format des Bildtitels fest, in dem die Gesamtzahl der Bilder und die aktuelle Bildreihenfolge angezeigt werden können.

Liste der wichtigsten Parameter und Methoden des Fancybox-Plug-Ins

gesetzt werden gesetzt werden

Parameter/Methoden	Beschreibung	Standardwert
Grundlegend
Breite	Legen Sie die Breite des seriellen Popup-Ports fest, wenn es sich bei dem Inhalt um SWF, IFrame oder einzeiligen Text handelt, 'autoDimensions' sollte auf false	560
Höhe	Legen Sie die Höhe des Popup-Seriell-Ports fest, wenn der Inhalt SWF, IFrame oder einzeiliger Text ist, 'autoDimensions' sollte auf false	340
zyklisch	Gibt an, ob die Anzeige in einer Schleife erfolgen soll, wenn der Inhalt eine Bildersammlung ist.	falsch
centerOnScroll	Pop-ups werden immer zentriert im Browser angezeigt.	falsch
modal	Ob das modale Fenster verwendet werden soll.Wenn es auf „true“ gesetzt ist, sollte es auch Folgendes enthalten: „hideOnOverlayClick“, „hideOnContentClick“, „enableEscapeButton“, „showCloseButton“ auf „false“ und „overlayShow“ auf „true“ gesetzt	falsch
Titelposition	Die Position des Titels kann auf „außen“, „innen“ oder „über“ eingestellt werden	'draußen'
transitionIn, transitOut	Der Fensteranzeigemodus kann auf „elastisch“, „ausblenden“ oder „kein“ eingestellt werden	'verblassen'
senden	Methode: Senden Sie die Daten des zugeschnittenen Bildes an den Server, damit der Server die Parameter zur Verarbeitung empfangen kann, z.B.: cropzoom.send('process.php','POST',{id=1},function(r){ Alert(r); });
Methode
$.fancybox.showActivity	Ladeanimation anzeigen
$.fancybox.hideActivity	Ladeanimation ausblenden
$.fancybox.close	Fenster schließen
$.fancybox.resize	Passen Sie die Höhe des Fensters automatisch an den Inhalt an
Zentriert	Ob die Auswahl zentriert, also in der Mitte des Containers angezeigt werden soll.

Der obige Inhalt ist die vollständige Beschreibung des umfangreichen Popup-Layer-Effekts des Fancybox of JQuery-Plug-Ins mit Quellcode-Download.