Vamos primeiro olhar para algumas renderizações:
Clique em uma das fotos a serem ampliadas, que podem suportar a descrição do texto da imagem:
Função de compartilhamento de suporte:
Apoiar o aumento do gesto e ampliar o gesto
Usando a estrutura JS é o PhotosWipe.
O PhotosWipe é um plug-in de ampliação de imagens, compatível com PC e terminais móveis. Ele experimentou várias versões e foi constantemente atualizado. Possui inúmeras armadilhas e tem enormes vantagens nos terminais móveis.
1. Pode controlar uma variedade de estilos, como:
Título, compartilhamento, botões de tela cheia, evento de clique em adicionar legendas, fundo transparente, etc.
2. Pode suportar o gesto de toque móvel compatível com o terminal PC
Todos os gestos básicos suportam: deslize o próximo ou anterior, arraste a panela, zoom, zoom ou feche, clique para alternar os controles e clique duas vezes para aumentar o zoom ou o zoom.
3. Compartilhe
A interface do usuário padrão tem um botão para compartilhar o link. Os links padrão são Facebook, Twitter e Pinterest, mas você pode definir o tipo de compartilhamento através da API.
4. Interface do usuário
A interface do usuário é completamente separada do script principal. A interface pode ser personalizada completamente. A interface do usuário do PhotosWipe padrão é responsiva e pode ser usada inteiramente em desktops, tablets e dispositivos móveis.
5. Mais funções estão esperando você descobrir.
Site oficial: http://photoswipe.com/
Github: https://github.com/dimsemenov/photoswipe
1. Baixe o PhotosWipe no site oficial e apresente -o à página
<link rel = "Stylesheet Prefetch" href = "css/photoswipe.css"> <link rel = "Fazenda de estilo prefetcher" href = "css/default-skin/default-skin.css"> <script src = "js/photoswipe.js"> </script> src = "js/photoswipe-ui-default.min.js"> </sCript>
2. A seguinte estrutura de código deve ser adicionada à página (essa estrutura é o código necessário para navegar imagens de plug-in. O autor não se integrou ao JS, portanto o usuário deve adicioná-lo manualmente à sua própria página da web):
<!- Elemento raiz do PhotosWipe. Deve ter classe PSWP. -> <div tabindex = "-1" role = "diálogo" aria-hidden = "true"> <!-Background of PhotosWipe. É um elemento separado, pois a opacidade animadora é mais rápida que o RGBA (). -> <div> </div> <!-Slides wrapper com transbordamento: oculto. -> <div> <!-Contêiner que mantém slides. O PhotosWipe mantém apenas 3 deles no DOM para salvar a memória. Não modifique esses 3 elementos PSWP__Item, os dados são adicionados posteriormente. -> <div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> <!-Padrão (PhotosWipeui_default) Interface na parte superior da área de deslizamento. Pode ser alterado. -> <div> <div> <!-Os controles são auto-explicativos. O pedido pode ser alterado. -> <div> </div> <but uma button> </button> <but uma button> </button> <!-elemento obterá classe pswp__preloader-ativo quando o pré-atendimento estiver em execução-> <div> <div> <div> <div> </div> </div> <div> </div> </div> </div> </div> <div> <div> </div> </div> </div> </div> </div> </div> </div>
3. Adicione o código da estrutura do PhotosWipe às imagens que você precisa navegar. O que você precisa prestar atenção aqui é
Data-PSWP-UID deve ser exclusivo em cada álbum. O tamanho de dados é a largura e a altura da imagem quando ampliada. Se a largura e a altura especificadas não corresponderem à imagem, a imagem exibida será deformada. Não há como remover o tamanho de dados, mas se você tiver tempo, poderá encontrar uma alternativa.
<!-Data-PSWP-UID deve ser único em cada álbum. O tamanho dos dados especifica a largura e a altura da imagem quando ampliado em zoom-> <div data-Pswp-uid = "1"> <Figura> <a href = "img/m3.jpg" data-size = "670x712"> <img src = "img/th1.jpg"> </a> </a>
4. Adicione o código JS. O autor deste código não foi integrado à estrutura do PhotosWipe. Ele precisa adicioná -lo manualmente à página da web.
<script type = "text/javascript"> var initphotosWipeFromdom = function (GallerySelector) {// Analisar os dados do slide de elementos dom (url, título, tamanho ...) // (filhos do galeria) var parsethumbnaillements = função (el) {var thumbelements = eL.ChildNodes, numNodes, numnodes = thheLeLes = thel; for (var i = 0; i <numNodes; i ++) {figural = thumbelements [i]; // <Figura> elemento // inclui apenas nós do elemento se (figural.nodeType! == 1) {continue; } 25 linkel = figural.Children [0]; // <a> Tamanho do elemento = linkel.getAttribute ('Data-size'). Split ('x'); // Crie item do objeto slide = {src: linkel.getAttribute ('href'), w: parseint (tamanho [0], 10), h: parseint (tamanho [1], 10)}; if (figural.children.length> 1) {// <FigCaption> content item.title = figura.Children [1] .innerhtml; } if (linkel.children.length> 0) {// <mig> nó de miniatura, pesquise o miniatura URL item.msrc = linkel.children [0] .getAttribute ('src'); } item.el = figura; // Salvar o elemento de link para getthumbledsfn items.push (item); } retornar itens; }; // Encontre o nó pai mais próximo var próximo = função mais próxima (el, fn) {return el && (fn (el)? El: mais próximo (el.parentnode, fn)); }; // Quando o usuário clica na miniatura, gatilho var OnThumbnailsclick = function (e) {e = e || Window.Event; E.PreventDefault? e.PreventDefault (): e.returnValue = false; var etarget = e.Target || E.Srcelement; // Encontre o elemento raiz do slide var clickEdListItem = mais próximo (etarget, function (el) {return (el.tagname && el.tagname.touppercase () === 'figura');}); if (! clickedListItem) {return; } // Encontre o índice do item clicado ao fazer todos os nós filhos //, alternativamente, você pode definir o índice via atributo de dados var clickedgallery = clickedlistiM.parentnode, ChildNodes = clickedListItem.parentnode.childnodes, numChildNodes = childnodes.lndom, nodex = nodex = 0; for (var i = 0; i <numChildNodes; i ++) {if (ChildNodes [i] .NodEType! == 1) {continuação; } if (ChildNodes [i] === clickedListItem) {index = nodeIndex; quebrar; } nodeIndex ++; } if (index> = 0) {// Abra o PhotosWipe se o índice válido encontrou o OpenPhoToSwipe (índice, ClickEdGallery); } retornar false; }; // Parse Index e Índice da galeria 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]) {continuação; } var par = vars [i] .split ('='); if (par.length <2) {continua; } params [par [0]] = par [1]; } if (params.gid) {params.gid = parseint (params.gid, 10); } retornar params; }; var openphoToSwipe = function (índice, GalleryElement, desableanImation, Fromurl) {var PSWPELEMENT = Document.QuerySelectorAll ('. Pswp') [0], Galeria, Opções, itens; itens = parsethumbnaillements (GalleryElement); // Opções de parâmetro = {barssize: {top: 100, inferior: 100}, tela cheia: false, // se o botão de tela inteira sharebuttons é suportado: [{id: 'weChat', etiquetel: 'compartilhar weChat', url: '#'}, {iD: 'weiBo', etc. imagem ', url:' {{raw_image_url}} ', download: true}], // compartilhe botão // define o índice da galeria (para url) Galleryuid: GalleryElement.getAttribute (' Data-Pswp-uid '), getthumbboundsfn: function) {// veja opções-> getthBrhBBBHBHBBHBBBHBBBHBHBBBHBHBBHBBHBHBBHBN) itens [índice] .el.getElementsByTagName ('img') [0], // Encontre a miniatura PageyScroll = window.pageyoffset || document.documentElement.scrolltop, ret = thumbnail.getBoundingClientRect (); return {x: rect.left, y: ret.top + pageyScroll, w: rect.width}; }}; // photosWipe abriu a partir de url if (Fromurl) {if (options.gallerypids) {// analisa o índice real quando os PIDs personalizados são usados para (var j = 0; j <items.length; j ++) {if (itens [j] .pid == index) {options.index = j;; quebrar; }}} else {// nos índices de URL começam de 1 options.index = parseint (índice, 10) - 1; }} else {options.index = parseint (índice, 10); } // saia se não é encontrado o índice if (isnan (options.index)) {return; } if (desableanImation) {options.showanimationDuration = 0; } // Passa dados para o PhotosWipe e inicialize a galeria = new PhotosWipe (PSWPELEMENT, PhotosWipeui_Default, itens, opções); Gallery.init (); }; // Faça uma folga por todos os elementos da galeria e eventos de ligação var galeryElements = document.QuerySelectorAll (GallerySelector); for (var i = 0, l = galeryElements.length; i <l; i ++) {galeryElements [i] .setAttribute ('data-pswp-uid', i+1); Galleres [i] .OnClick = OnThumbnailsclick; } // Parse URL e Galeria aberta se ele contém #& pid = 3 & Gid = 1 var hashData = photoswipeparsehash (); if (hashdata.pid && hashdata.gid) {openphotosWipe (hashdata.pid, galerialements [hashdata.gid - 1], true, true); }}; // Execute acima a função initphotosWipeFromdom ('. My-Gallery'); </script>Este artigo foi compilado em "Resumo das Habilidades de Desenvolvimento do Javascript WeChat", e todos são bem -vindos para aprender e ler.
Gostaria de recomendar um tutorial sobre o WeChat Mini Program, que está muito preocupado: "O tutorial de desenvolvimento de programas do WeChat Mini" foi cuidadosamente compilado pelo editor de todos, espero que gostem.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.