Primero veamos algunas representaciones:
Haga clic en una de las fotos para ampliar, que puede admitir la descripción del texto de la imagen:
Función de compartir compartir:
Apoyar la ampliación de gestos y alejar
Usar el marco JS es Photoswipe.
Photoswipe es un complemento de ampliación de imágenes, compatible con PC y terminales móviles. Ha experimentado múltiples versiones y se ha actualizado constantemente. Tiene innumerables dificultades y tiene grandes ventajas en las terminales móviles.
1. Puede controlar una variedad de estilos como:
Título, Compartir, Botones de pantalla completa, Haga clic en el evento, ya sea para agregar subtítulos, fondo transparente, etc.
2. Puede admitir gesto táctil móvil compatible con PC Terminal
Todos los gestos básicos soportan: deslice el siguiente o anterior, arrastre la bandeja, el zoom, el zoom o cierre, haga clic para alternar los controles y hacer doble clic para acercarse o zoom.
3. Compartir
La interfaz de usuario predeterminada tiene un botón para compartir el enlace. Los enlaces predeterminados son Facebook, Twitter y Pinterest, pero puede establecer el tipo de intercambio a través de la API.
4. Interfaz de usuario
La interfaz de usuario está completamente separada del script central. La interfaz se puede personalizar por completo. La interfaz de usuario de Photoswipe predeterminada responde y se puede usar completamente en escritorios, tabletas y dispositivos móviles.
5. Más funciones están esperando que descubras.
Sitio web oficial: http://photoswipe.com/
github: https://github.com/dimsemenov/photoswipe
1. Descargue Photoswipe en el sitio web oficial y preséntelo en la página
<link rel = "Stylesheet prefetch" href = "css/photoswipe.css"> <link rel = "stylesheet prefetch" href = "css/default/default-skin.css"> <script src = "js/photoswipe.js"> </script> <script <script <script> src = "js/Photoswipe-ui-fault.min.js"> </script>
2. La siguiente estructura del código debe agregarse a la página (esta estructura es el código requerido para navegar en las imágenes de complemento. El autor no se ha integrado en JS, por lo que el usuario debe agregarlo manualmente a su propia página web):
<!- Elemento raíz de Photoswipe. Debe tener clase PSWP. -> <div tabindex = "-1" rol = "diálogo" aria-hidden = "true"> <!-fondo de Photoswipe. Es un elemento separado ya que la opacidad de animación es más rápida que rgba (). -> <div> </div> <!-Slide Wrapper con desbordamiento: oculto. -> <div> <!-Contenedor que contiene diapositivas. Photoswipe mantiene solo 3 de ellos en el DOM para guardar la memoria. No modifique estos 3 elementos PSWP__Item, los datos se agregan más adelante. -> <div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> <!-default (Photoswipeui_default) en la parte superior del área deslizante. Se puede cambiar. -> <div> <div> <!-Los controles se explican por sí mismos. El pedido se puede cambiar. -> <div> </div> <boton> </boton> <boton> </boton> <!-El elemento obtendrá la clase pswp__preloader-activa cuando el precomso se ejecuta-> <div> <div> <div> <viv> </div> </biv> </biv> </div> </div> </div> </div> <viv> <viv> <viv> <div> </div> </div> </div> </div> <div> <div> </div> </div> </div> </div> </div> </div> </div>
3. Agregue el código de estructura de Photoswipe a las imágenes que necesita navegar. A lo que necesitas prestar atención aquí es
Data-PSWP-UID debe ser único en cada álbum. El tamaño de los datos es el ancho y la altura de la imagen cuando se amplían. Si el ancho y la altura especificados no coinciden con la imagen, la imagen mostrada se deformará. No hay forma de eliminar el tamaño de los datos, pero si tiene tiempo, puede encontrar una alternativa.
<!-Data-PSWP-UID debe ser único en cada álbum. El tamaño de datos especifica el ancho y la altura de la imagen cuando se acerca-> <div data-pswp-uid = "1"> <figura> <a href = "img/m3.jpg" data-size = "670x712"> <img src = "img/th1.jpg"> </a> </figura> </div>
4. Agregue el código JS. El autor de este código no se ha integrado en el marco de Photoswipe. Necesita agregarlo manualmente a la página web.
<script type = "text/javaScript"> var initPhotoswipeFromDom = function (GallerySelector) {// analiza los datos de diapositivas de DOM (url, title, size ...) // (Children of GallerySelector) var parsetHumbnailEments = function (el) {var thumbelements = el.childnodes, numnodes = thumbelements.ll longitud Linkel, tamaño, artículo; for (var i = 0; i <numNodes; i ++) {figura = Thumbelements [i]; // <figura> elemento // incluye solo nodos de elementos if (figurael.nodeType! == 1) {continuar; } 25 Linkel = figurael.Children [0]; // <a> size de elemento = linkel.getAttribute ('data-size'). Split ('x'); // Crear objeto de diapositiva elemento = {src: linkel.getAttribute ('href'), w: parseInt (tamaño [0], 10), h: parseInt (tamaño [1], 10)}; if (figurael.children.length> 1) {// <fig -Caption> content item.title = figurael.children [1] .innerhtml; } if (linkel.children.length> 0) {// <img> nodo de miniatura, buscar url de miniatura item.msrc = linkel.children [0] .getAttribute ('src'); } item.el = figurael; // Guardar elemento de enlace para getThumbBoundsfn elementos.push (elemento); } Los elementos de retorno; }; // Encuentre el nodo principal más cercano var cercan = function Closest (el, fn) {return el && (fn (el)? El: Closest (El.ParentNode, Fn)); }; // Cuando el usuario hace clic en la miniatura, active var onThumbnailsClick = function (e) {e = e || Window.event; E.PreventDefault? E.PreventDefault (): e.returnValue = false; var Etarget = E.Target || E.Sracelement; // Encuentra el elemento raíz de la diapositiva var clickedlistitem = CloseSt (Etarget, function (el) {return (el.tagname && el.tagname.touppercase () === 'figura');}); if (! ClickedListItem) {return; } // Encuentre el índice de elemento hecho en bucle a través de todos los nodos infantiles // Alternativamente, puede definir el índice a través de datos: atributo var clickedgallery = clickedListitem.parentNode, childNodes = clickedListEtem.ParentNode.childNodes, numchildnodes = childnodes.longhing, nodeindex = 0, índice; for (var i = 0; i <numchildnodes; i ++) {if (childNodes [i] .nodeType! == 1) {continuar; } if (childNodes [i] === ClickedListItem) {index = nodeindex; romper; } nodeindex ++; } if (index> = 0) {// abrir Photoswipe si el índice válido se encuentra OpenPhotoswipe (index, clickedgallery); } return false; }; // Índice de imagen de analizador e índice de galería de URL (#& pid = 1 & gid = 2) var photoswipeParsehash = function () {var hash = window.location.hash.substring (1), params = {}; if (hash.length <5) {return params; } var vars = hash.split ('&'); for (var i = 0; i <vars.length; i ++) {if (! vars [i]) {continuar; } var par = vars [i] .split ('='); if (par.length <2) {continuar; } params [par [0]] = par [1]; } if (params.gid) {params.gid = parseInt (params.gid, 10); } return Params; }; var OpenPhotoswipe = function (index, galeryElement, discleEnimation, fromurl) {var pswpelement = document.queryselectorall ('. PSWP') [0], galería, opciones, elementos; items = parsethumbnailements (GalleryElement); // Opciones de parámetro = {BarsSize: {Top: 100, Bottom: 100}, FullScreenel: False, // Si el botón de pantalla completo ShareButtons es compatible: [{id: 'WeChat', etiqueta: 'share weChat', url: '#'}, {id: 'weibo', etiqueta: 'sina weibo', url:#'},},', ', »,»,' Save: 'Save:' Save Downlow ',' Save: 'Save:' Save Downlow ',' Save: 'Save: imagen ', url:' {{raw_image_url}} ', descargar: true}], // share button // Define Gallery Index (para url) GalleryUid: galeryElement.getAttribute (' data-pswp-uid '), getThumbBoundsfn: function (índice) Elementos [índice] .el.getElementsBytagName ('img') [0], // busca miniatura PageyScroll = Window.PageyOffset || document.documentelement.scrolltop, rect = thumbnail.getBoundingClientRect (); return {x: rect.left, y: rect.top + pageyScroll, w: rect.width}; }}; // Photoswipe abierto desde url if (fromurl) {if (options.gallerypids) {// Índice real de analizador cuando se usan PIDS personalizados para (var j = 0; j <items.length; j ++) {if (elementos [j] .pid == index) {options.index = j; romper; }}} else {// en URL Los índices comienzan desde 1 opciones.index = parseInt (índice, 10) - 1; }} else {options.index = parseInt (index, 10); } // Salir si el índice no se encuentra if (isnan (options.index)) {return; } if (discleanimation) {options.showanimationDuration = 0; } // pasar datos a Photoswipe e inicializar it Gallery = new Photoswipe (PSWPelement, Photoswipeui_default, elementos, opciones); galería.init (); }; // Reunir a través de todos los elementos de la galería y Bind Events var GalleryElements = Document.QueryselectorAll (GallerySelector); for (var i = 0, l = GalleryElements.length; i <l; i ++) {GalleryElements [i] .setTribute ('data-pswp-uid', i+1); GalleryElements [i] .Onclick = OnThumbnailsClick; } // Pase URL y Open Gallery si contiene #& pid = 3 & gid = 1 var HashData = PhotoswipeParsehash (); if (hashdata.pid && hashdata.gid) {openPhotoswipe (hashdata.pid, galeryElements [HashData.gid - 1], true, true); }}; // ejecutar la función anterior initPhotoswipeFromdom ('. my-Gallery'); </script>Este artículo se ha compilado en "Resumen de las habilidades de desarrollo de JavaScript WeChat", y todos son bienvenidos a aprender y leer.
Me gustaría recomendar un tutorial sobre el programa WeChat Mini que esté muy preocupado: "Tutorial de desarrollo del programa WeChat Mini" ha sido cuidadosamente compilado por el editor de todos, espero que les guste.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.