Schauen wir uns zunächst ein paar Renderings an:
Klicken Sie auf eines der Fotos, um sich zu vergrößern, um die Beschreibung der Bildtext zu unterstützen:
Unterstützungsfreigabefunktion:
Unterstützen Sie die Gestenvergrößerung und zoomen Sie aus
Verwenden von JS Framework ist Fotoswipe.
FOTOSWIPE ist ein Bildvergrößerungs-Plug-In, das mit PC- und Mobilgeräten kompatibel ist. Es hat mehrere Versionen erlebt und wurde ständig aktualisiert. Es hat unzählige Fallstricke und hat enorme Vorteile gegenüber mobilen Terminals.
1. kann eine Vielzahl von Stilen steuern, wie z. B.:
Titel, Freigabe, Vollbildschaltflächen, klicken Sie auf Ereignis, ob Untertitel, transparenter Hintergrund usw. hinzugefügt werden sollen.
2. Es kann die mit dem PC -Terminal kompatibele mobile Touch -Geste unterstützen
Alle grundlegenden Gesten unterstützen: Schieben Sie die nächste oder vorherige, ziehen Sie die Pfanne, zoomen, zoomen oder schließen, klicken Sie, um die Steuerelemente zu wechseln, und doppelklicken Sie, um zu zoomen oder zu zoomen.
3.. Share
Die Standard -Benutzeroberfläche verfügt über eine Schaltfläche, um den Link zu teilen. Die Standard -Links sind Facebook, Twitter und Pinterest, aber Sie können den Freigabentyp über die API einstellen.
4. Benutzeroberfläche
Die Benutzeroberfläche ist vollständig vom Kernskript getrennt. Die Schnittstelle kann vollständig angepasst werden. Die Standardfotoswipe -Benutzeroberfläche reagiert und kann vollständig auf Desktops, Tablets und mobilen Geräten verwendet werden.
5. Weitere Funktionen warten darauf, dass Sie entdecken.
Offizielle Website: http://photoswipe.com/
Github: https://github.com/dimeneV/Photoswipe
1. Laden Sie Fotoswipe auf der offiziellen Website herunter und stellen Sie sie der Seite vor
<link rel = "styleSheet prefetch" href = "css/fotoswipe.css"> <link rel = "stylesheet prefetch" href = "css/default-skin/default-skin.css"> <script src = "js/fotoswipe.js"> </script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <scrpt src = "js/fotoswipe-ui-default.min.js"> </script>
2. Die folgende Codestruktur muss der Seite hinzugefügt werden (diese Struktur ist der Code, der für das Durchsuchen von Plug-in-Bildern erforderlich ist. Der Autor hat sich nicht in JS integriert, sodass der Benutzer ihn manuell zu seiner eigenen Webseite hinzufügen muss):
<!- Root-Element von Fotoswipe. Muss PSWP der Klasse haben. -> <div tabindex = "-1" rollen = "Dialog" Aria-hidden = "true"> <!-Hintergrund von fotoswipe. Es ist ein separates Element, da die animierende Deckkraft schneller ist als RGBA (). -> <div> </div> <!-Objektträger mit Überlauf: versteckt. -> <div> <!-Behälter, der Folien hält. Fotoswipe hält nur 3 davon im DOM, um Speicher zu speichern. Ändern Sie diese 3 PSWP__Item -Elemente nicht, Daten werden später hinzugefügt. -> <div> <div> </div> <div> </div> </div> <div> </div> </div> </div> <!-Standard (fotoswipeui_default) Schnittstelle über den Schiebebereich. Kann geändert werden. -> <div> <div> <!-Kontrollen sind selbsterklärend. Bestellung kann geändert werden. -> <div> </div> <button> </button> <button <div> </div> </div> </div> </div> <div> </div> </div> </div> </div> </div> </div> </div>
3. Fügen Sie den Bildern, das Sie zum Durchsuchen benötigen, Fotoswipe -Strukturcode hinzu. Was Sie hier achten müssen, ist
Data-PSWP-uid muss in jedem Album einzigartig sein. Die Datengröße ist die Breite und Höhe des Bildes, wenn sie vergrößert werden. Wenn die angegebene Breite und Höhe nicht mit dem Bild übereinstimmen, wird das angezeigte Bild deformiert. Es gibt keine Möglichkeit, die Datengröße zu entfernen, aber wenn Sie Zeit haben, können Sie eine Alternative finden.
<!-Data-PSWP-uid muss in jedem Album einzigartig sein. Die Datengröße gibt die Breite und Höhe des Bildes an, wenn in-> <div data-pswp-uid = "1"> <abbildung> <a href = "img/m3.jpg" data-size = "670x712"> <img Src = "IMG/Th1.jpg"> </a> </Abbildung> </Abbildung> </Abbildung> </</Abbildung> </</Abbildung> </</Abbildung> </Abbildung> </Abbildung “angibt.
4. Fügen Sie JS -Code hinzu. Der Autor dieses Codes wurde nicht in das Fotoswipe -Framework integriert. Er muss es manuell zur Webseite hinzufügen.
<script type="text/javascript"> var initPhotoSwipeFromDOM = function(gallerySelector) { // parse slide data from DOM elements (URL, title, size...) // (children of gallerySelector) var parseThumbnailElements = function(el) { var thumbElements = el.childNodes, numNodes = thumbElements.length, items = [], figureEl, linkEl, Größe, Artikel; für (var i = 0; i <numnodes; i ++) {figel = Thumbelements [i]; // <Abus> Element // Nur Elementknoten eingeben, wenn (figure.nodetype! == 1) {Fortsetzung; } 25 linkel = figel.Children [0]; // <a> element size = linkel.getAttribute ('data-size'). split ('x'); // Slide -Objektelement = {src: linkel.getAttribute ('href'), w: parseInt (Größe [0], 10), H: ParseInt (Größe [1], 10)}; if (figur.children.length> 1) {// <FigCaption> Inhaltselement.title = figureL.Children [1] .innerhtml; } if (linkel.children.length> 0) {// <img> thumbnail node, suche thumbnail url item.msrc = linkel.children [0] .getAttribute ('src'); } item.el = figelel; // Linkelement für GetThumbBoundSFn items.push (Element) speichern; } Gegenstände zurückgeben; }; // den nächstgelegenen übergeordneten Knoten var näher finde = funktion am nächsten (el, fn) {return el && (fn (el)? El: am nächsten (El.Parentnode, fn)); }; // Wenn der Benutzer auf die Miniaturansicht klickt, tröpfen Sie var onThumbnailsclick = Funktion (e) {e = e || Fenster.Event; e.PreventDefault? e.preventDefault (): e.returnValue = false; var etarget = e.target || e.srcelement; // Root -Element von Slide Var klickedListItem = nächstes (etarget, function (el) {return (el.tagname && el.tagname.touppercase () === 'Abbildung');}); if (! ClickedListItem) {return; } // Index des angeklickten Elements finden, indem Sie alle untergeordneten Knoten durchschleifen // Alternativ können Sie den Index über Data-Attribut var klickedGallery = klickedListItem.Parentnode, childnodes = klickedListItem.parentnode.childnode, numchildnodes = childnodes.lengthes, nodeIndex = 0, index; für (var i = 0; i <numchildnodes; i ++) {if (childnodes [i] .nodetype! == 1) {Fortsetzung; } if (childnodes [i] === klickedListItem) {index = nodeIndex; brechen; } nodeIndex ++; } if (index> = 0) {// fotosWipe if gales index fand openPhotosWipe (index, klickedGallery); } return false; }; // Bildindex und Galerie -Index aus URL (#& pid = 1 & gid = 2) var fotosWipeParSehash = function () {var Hash = window.location.hash.substring (1), params = {}; if (hash.length <5) {return params; } var vars = Hash.split ('&'); für (var i = 0; i <varsgth; i ++) {if (! vars [i]) {Fortsetzung; } var pair = vars [i] .Split ('='); if (pair.Length <2) {Fortsetzung; } params [pair [0]] = pair [1]; } if (params.gid) {params.gid = parseInt (params.gid, 10); } Rückgabeparameter; }; var openPhotosWipe = Funktion (Index, GalerieLeement, Deaktivierung, FromUrl) {var pswpelement = document.querySelectorAll ('. PSWP') [0], Galerie, Optionen, Elemente; items = parsethumbnailelements (GalerieElement); // Parameter options = { barsSize: { top: 100, bottom: 100 }, fullscreenEl : false, // Whether full screen button shareButtons is supported: [ {id:'wechat', label:'share WeChat', url:'#'}, {id:'weibo', label:'Sina Weibo', url:'#'}, {id:'download', label:'Save Bild ', url:' {{ask_image_url}} ', download: true}], // Taste teilen // Galerie-Index definieren (für url) GalerieUid: galerieElement Elemente [Index] .El.GetElementsByTagName ('IMG') [0], // Finden Sie Thumbnail pageyscroll = Fenster.pageyOffset || document.documentElement.scrolltop, rect = thumbnail.getBoundingClientRect (); return {x: rect.Left, y: rect.top + pageyscroll, w: rect.width}; }}; // fotosWipe von url geöffnet if (fromUrl) {if (options.galleryPIDs) {// real index analysieren, wenn benutzerdefinierte pids für (var j = 0; j <items.length; j ++) {if (items [j] .pid == index) {options.index = j; brechen; }}} else {// in URL -Indizes starten mit 1 Optionen.Index = ParseInt (Index, 10) - 1; }} else {options.index = parseInt (Index, 10); } // Beenden Sie, wenn Index nicht gefunden wird, wenn (isnan (options.index)) {return; } if (deaktiviert) {options.showanimationDuration = 0; } // Daten an fotoswipe übergeben und es initialisieren galerie = new fotosWipe (PSWPelement, fotoswipeui_default, Elemente, Optionen); galerie.init (); }; // Schleifen Sie durch alle Galerieelemente und Bind -Ereignisse var gal GalleryElements = document.querySelectorAll (GallerySelector); für (var i = 0, l = gal GalleryElements GalerieElements [i] .onclick = onhumbnailsclick; } // URL analysieren und Galerie öffnen, wenn es #& pid = 3 & gid = 1 var Hashdata = fotosWipeParsehash () enthält; if (hashdata.pid && hashdata.gid) {openPhotoswipe (Hashdata.pid, GalerieElements [Hashdata.gid - 1], wahr, wahr); }}; // Die obige Funktion initphotoswipeFromdom ('. My-Gallery'); </script> ausführenDieser Artikel wurde in "Zusammenfassung von JavaScript Wechat Development Skills" zusammengestellt, und jeder kann gerne lernen und lesen.
Ich möchte ein Tutorial zum WeChat Mini -Programm empfehlen, das sehr besorgt ist: "WeChat Mini -Programmentwicklungs -Tutorial" wurde vom Herausgeber aller sorgfältig zusammengestellt. Ich hoffe, es gefällt Ihnen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.