Pertama -tama mari kita lihat beberapa rendering:
Klik salah satu foto untuk memperbesar, yang dapat mendukung deskripsi teks gambar:
Fungsi Berbagi Dukungan:
Mendukung pembesaran gerakan dan memperbesar gerakan
Menggunakan JS Framework adalah photoswipe.
Photoswipe adalah plug-in pembesaran gambar, kompatibel dengan PC dan terminal seluler. Ini telah mengalami beberapa versi dan telah terus diperbarui. Ini memiliki jebakan yang tak terhitung jumlahnya dan memiliki keunggulan besar pada terminal seluler.
1. Dapat mengontrol berbagai gaya seperti:
Judul, Bagikan, Tombol Layar Lengkap, Klik Acara, Apakah akan menambahkan subtitle, latar belakang transparan, dll.
2. Ini dapat mendukung gerakan sentuh seluler yang kompatibel dengan terminal PC
Semua Dukungan Gerakan Dasar: Geser yang berikutnya atau sebelumnya, seret wajan, zoom, zoom, atau tutup, klik untuk beralih kontrol, dan klik dua kali untuk memperbesar atau memperbesar.
3. Bagikan
UI default memiliki tombol untuk berbagi tautan. Tautan defaultnya adalah Facebook, Twitter, dan Pinterest, tetapi Anda dapat mengatur jenis berbagi melalui API.
4. Antarmuka pengguna
Antarmuka pengguna sepenuhnya terpisah dari skrip inti. Antarmuka dapat disesuaikan sepenuhnya. UI Photoswipe default responsif dan dapat digunakan sepenuhnya pada desktop, tablet, dan perangkat seluler.
5. Lebih banyak fungsi menunggu Anda untuk menemukan.
Situs web resmi: http://photoswipe.com/
Github: https://github.com/dimsemenov/photoswipe
1. Unduh Photoswipe di situs web resmi dan perkenalkan ke halaman
<tautan rel = "stylesheet prefetch" href = "css/photoswipe.css"> <link rel = "stylesheet prefetch" href = "css/default-skin/default-skin.css"> <script src = "js/photoswipe.js"> </cript> skrip src = "js/photoswipe-ui-default.min.js"> </script>
2. Struktur kode berikut harus ditambahkan ke halaman (struktur ini adalah kode yang diperlukan untuk menjelajahi gambar plug-in. Penulis belum terintegrasi ke dalam JS, sehingga pengguna harus secara manual menambahkannya ke halaman webnya sendiri):
<!- Elemen root dari Photoswipe. Harus memiliki PSWP kelas. -> <Div TabIndex = "-1" Role = "Dialog" aria-hidden = "true"> <!-latar belakang photoswipe. Ini adalah elemen terpisah karena opacity animasi lebih cepat dari RGBA (). -> <div> </div> <!-Slide Wrapper dengan overflow: Tersembunyi. -> <div> <!-wadah yang menahan slide. Photoswipe hanya menyimpan 3 dari mereka di DOM untuk menyimpan memori. Jangan memodifikasi 3 elemen PSWP__Item ini, data ditambahkan nanti. -> <div> <vet> </div> <viv> </div> <verv> </div> <ver> </div> <ver> </div> </div> <!-Antarmuka default (photoswipeui_default) di atas area geser. Bisa diubah. -> <div> <div> <!-Kontrol cukup jelas. Pesanan dapat diubah. --> <div></div> <button></button> <button></button> <!-- element will get class pswp__preloader--active when preloader is running --> <div> <div> <div> <div></div> </div> </div> </div> </div> </div> </div> <div> <div></div> </div> </div> </div> <div> <Div> </div> </div> </div> </div> <div> <div> </div> </div> </div> </div> </div> </div> </div>
3. Tambahkan kode struktur photoswipe ke gambar yang perlu Anda jelajahi. Yang perlu Anda perhatikan di sini adalah
Data-PSWP-UID harus unik di setiap album. Ukuran data adalah lebar dan tinggi gambar saat diperbesar. Jika lebar dan tinggi yang ditentukan tidak cocok dengan gambar, gambar yang ditampilkan akan cacat. Tidak ada cara untuk menghapus ukuran data, tetapi jika Anda punya waktu, Anda dapat menemukan alternatif.
<!-Data-PSWP-UID harus unik di setiap album. Ukuran data Menentukan lebar dan tinggi gambar saat diperbesar-> <Div Data-PSWP-UID = "1"> <figure> <a href = "img/m3.jpg" ukuran data = "670x712"> <img src = "img/th1.jpg"> </a> </fighc = "Img/th1.jpg"> </a> </fighc = "IMG/TH1.JPG"> </a> </fighc = "div/th1.jpg"> </a> </figh> </fighc = "IMG/TH1.jpg"> </a> </fighc = "div/th1.jpg"> </a> </fighc = "div/th1.jpg"> </a> </fighc = "div/th1.jpg"> </a> </fighc = "div/th1.jpg"> </a> </figur
4. Tambahkan kode JS. Penulis kode ini belum diintegrasikan ke dalam kerangka photoswipe. Dia perlu menambahkannya secara manual ke halaman web.
<type skrip = "text/javascript"> var initphotoswipefromdom = function (galeri galeri) {// parse data slide dari elemen dom (url, judul, ukuran ...) // (anak -anak galeri) var parsethumblements = function (sel) {var thumbelements = eL.childnodes, numnements = numbemements = numeles = numeles = numbemements = numeles = numbements = numbemements = numbemements = numbements = numelements = numBlements = numbements = numelements = nUMSElS = nUMREELS = NUMBLES = NUMBLESS; ukuran, item; untuk (var i = 0; i <numnodes; i ++) {figurel = thumbelements [i]; // <fighige> elemen // Sertakan hanya elemen node if (fighel.nodetype! == 1) {lanjutkan; } 25 linkel = figurel.children [0]; // <a> elemen ukuran = linkel.getAttribute ('data-ukuran'). split ('x'); // Buat item objek slide = {src: linkel.getAttribute ('href'), w: parseInt (size [0], 10), h: parseInt (size [1], 10)}; if (fighel.children.length> 1) {// <figcaption> item konten.title = figureel.children [1] .innerHtml; } if (linkel.children.length> 0) {// <mmg> node thumbnail, cari thumbnail url item.msrc = linkel.children [0] .getAttribute ('src'); } item.el = figurel; // Simpan elemen tautan untuk item GetthumbboundSfn.push (item); } mengembalikan item; }; // Temukan simpul induk terdekat var terdekat = fungsi terdekat (el, fn) {return el && (fn (el)? El: terdekat (el.parentnode, fn)); }; // Ketika pengguna mengklik thumbnail, pemicu var ontthumbnailsclick = function (e) {e = e || window.event; E.PreventDefault? e.preventdefault (): e.ReturnValue = false; var etarget = e.target || E.Srcelement; // Temukan elemen root dari slide var clickedlistItem = terdekat (etarget, function (el) {return (el.tagname && el.tagname.touppercase () === 'figure');}); if (! clickedListItem) {return; } // Temukan indeks item yang diklik dengan melingkar melalui semua node anak // Sebagai alternatif, Anda dapat mendefinisikan indeks melalui data- atribut var clickedgallery = clickedlistitem.parentnode, childnodes = clickedlistitem.parentnode.childnodes, numChildnodes = childNodes.length, nodeindex = 0 untuk (var i = 0; i <numchildnodes; i ++) {if (childnodes [i] .nodetype! == 1) {lanjutkan; } if (childnodes [i] === clickedListItem) {index = nodeIndex; merusak; } nodeIndex ++; } if (index> = 0) {// buka photoswipe jika indeks valid ditemukan openphotoswipe (index, clickedgallery); } return false; }; // indeks gambar parse dan indeks galeri dari 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 ('&'); untuk (var i = 0; i <vars.length; i ++) {if (! vars [i]) {lanjutan; } var pair = vars [i] .split ('='); if (pair.length <2) {lanjutan; } params [pair [0]] = pair [1]; } if (params.gid) {params.gid = parseInt (params.gid, 10); } return params; }; var openphotoswipe = function (index, galleryElement, DisableAnimation, fromUrl) {var pSwpelement = document.queryselectorall ('. pswp') [0], galeri, opsi, item; item = parsetHumbNailElements (GalleryElement); // Opsi Parameter = {BarsSize: {Top: 100, Bottom: 100}, FullScreenel: False, // Apakah tombol Layar Lengkap SHARBUTTONS didukung: [{id: 'weChat', label: 'Bagikan weChat', URL: '#'}, {id: 'Weibo', label: 'SINA', 'URL:'#',}, {id:' weibo ', label:' SINA ',' URL: '#',}, {id: 'weibo', label: 'SINA WEIBO', ' gambar ', url:' {{raw_image_url}} ', download: true}], // Bagikan tombol // define galeri indeks (untuk url) galleryuid: galleryElement.getattribute (' Data-PSWP-UID '), getthumboundsfn: function (index) {/ lihat vombp-uid'), getthumboundsfn: function of index) {/ lihat vombp-uid '), getthumboundsfn: function of index) {/ lihat vARIAD-> Item [indeks] .el.getElementsbyTagname ('img') [0], // temukan thumbnail pageyscroll = window.pageyoffset || document.documentelement.scrolltop, rect = thumbnail.getBoundingClientRect (); return {x: rect.left, y: rect.top + pageyscroll, w: rect.width}; }}; // photoswipe dibuka dari url if (fromUrl) {if (options.gallerypids) {// parse indeks nyata ketika pid khusus digunakan untuk (var j = 0; j <items.length; j ++) {if (item [j] .pid == index) {options.index = j; merusak; }}} else {// Dalam indeks URL mulai dari 1 opsi.index = parseInt (index, 10) - 1; }} else {options.index = parseInt (index, 10); } // Keluar jika indeks tidak ditemukan jika (isnan (options.index)) {return; } if (disableAnimation) {options.showanimationduration = 0; } // Lewati data ke photoswipe dan inisialisasi galeri itu = photoswipe baru (PSWPElement, photoswipeui_default, item, opsi); galeri.init (); }; // Lingkarkan melalui semua elemen galeri dan ikat acara var galeri = document.queryselectorall (galeri galeri); untuk (var i = 0, l = galleryElements.length; i <l; i ++) {galleryElements [i] .setAttribute ('data-pswp-uid', i+1); GalleryElements [i] .onClick = onthumbnailsclick; } // parse url dan galeri buka jika berisi #& pid = 3 & gid = 1 var hashData = photoswipeparsehash (); if (hashdata.pid && hashdata.gid) {openphotoswipe (hashdata.pid, GalleryElements [hashdata.gid - 1], true, true); }}; // Jalankan fungsi di atas initphotoswipefromdom ('. my-gallery'); </script>Artikel ini telah dikompilasi menjadi "Ringkasan Keterampilan Pengembangan JavaScript WeChat", dan semua orang dipersilakan untuk belajar dan membaca.
Saya ingin merekomendasikan tutorial tentang program mini WeChat yang sangat prihatin: "Tutorial Pengembangan Program Mini WeChat" telah disusun dengan cermat oleh editor semua orang, saya harap Anda menyukainya.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.