ก่อนอื่นให้ดูการเรนเดอร์เล็กน้อย:
คลิกหนึ่งในรูปภาพเพื่อขยายซึ่งสามารถรองรับภาพข้อความคำอธิบาย:
ฟังก์ชั่นการแชร์:
สนับสนุนการขยายท่าทางและซูมออก
การใช้ JS Framework เป็นรูปถ่าย
Photoswipe เป็นปลั๊กอินขยายรูปภาพเข้ากันได้กับพีซีและเทอร์มินัลมือถือ มันมีประสบการณ์หลายรุ่นและได้รับการปรับปรุงอย่างต่อเนื่อง มันมีข้อผิดพลาดนับไม่ถ้วนและมีข้อได้เปรียบอย่างมากในเทอร์มินัลมือถือ
1. สามารถควบคุมสไตล์ที่หลากหลายเช่น:
ชื่อเรื่องแชร์ปุ่มเต็มหน้าจอคลิกเหตุการณ์ไม่ว่าจะเพิ่มคำบรรยายพื้นหลังโปร่งใส ฯลฯ
2. สามารถรองรับท่าทางสัมผัสมือถือที่เข้ากันได้กับเทอร์มินัลพีซี
การรองรับท่าทางพื้นฐานทั้งหมด: เลื่อนไปข้างหน้าหรือก่อนหน้านี้ลากกระทะซูมซูมหรือปิดคลิกเพื่อสลับการควบคุมและดับเบิลคลิกเพื่อซูมเข้าหรือซูม
3. แบ่งปัน
UI เริ่มต้นมีปุ่มเพื่อแชร์ลิงก์ ลิงค์เริ่มต้นคือ Facebook, Twitter และ Pinterest แต่คุณสามารถตั้งค่าประเภทการแชร์ผ่าน API
4. ส่วนต่อประสานผู้ใช้
ส่วนต่อประสานผู้ใช้จะถูกคั่นด้วยสคริปต์หลักอย่างสมบูรณ์ อินเทอร์เฟซสามารถปรับแต่งได้อย่างสมบูรณ์ Photoswipe UI เริ่มต้นนั้นตอบสนองได้และสามารถใช้งานได้ทั้งหมดบนเดสก์ท็อปแท็บเล็ตและอุปกรณ์มือถือ
5. ฟังก์ชั่นเพิ่มเติมกำลังรอให้คุณค้นพบ
เว็บไซต์อย่างเป็นทางการ: http://photoswipe.com/
GitHub: https://github.com/dimsemenov/photoswipe
1. ดาวน์โหลด Photoswipe บนเว็บไซต์ทางการและแนะนำให้รู้จักกับหน้าเว็บ
<link rel = "stylesheet prefetch" href = "css/photoswipe.css"> <link rel = "stylesheet prefetch" href = "css/default-skin/default-skin.css"> <script src = "js/photoswipe.js" src = "js/photoswipe-ui-default.min.js"> </script>
2. โครงสร้างรหัสต่อไปนี้จะต้องเพิ่มลงในหน้า (โครงสร้างนี้เป็นรหัสที่จำเป็นสำหรับการเรียกดูภาพปลั๊กอินผู้เขียนไม่ได้รวมเข้ากับ JS ดังนั้นผู้ใช้จะต้องเพิ่มด้วยตนเองในหน้าเว็บของเขาเอง):
<!- องค์ประกอบรูทของภาพถ่าย ต้องมีคลาส PSWP -> <div tabindex = "-1" role = "กล่องโต้ตอบ" Aria-hidden = "true"> <!-พื้นหลังของภาพถ่าย มันเป็นองค์ประกอบแยกต่างหากเนื่องจากความทึบของภาพเคลื่อนไหวเร็วกว่า RGBA () -> <div> </div> <!-ห่อหุ้มสไลด์ด้วยการล้น: ซ่อน -> <div> <!-คอนเทนเนอร์ที่ถือสไลด์ Photoswipe เก็บเพียง 3 ของพวกเขาใน DOM เพื่อบันทึกหน่วยความจำ อย่าแก้ไของค์ประกอบ PSWP__ITEM ทั้ง 3 ตัวนี้ข้อมูลจะถูกเพิ่มในภายหลัง -> <div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> <! สามารถเปลี่ยนแปลงได้ -> <div> <div> <!-การควบคุมเป็นการอธิบายตนเอง คำสั่งซื้อสามารถเปลี่ยนแปลงได้ -> <div> </div> <button> </button> <button> </button> <!-องค์ประกอบจะได้รับคลาส pswp__preloader-ทำงานเมื่อ preloader ทำงาน-> <div> <div> <div> </div> </div> </div> </div> </div> </div> <div> </div> </div> </div> </div> <div> </div> </div> </div> </div> </div> </div> </div> </div>
3. เพิ่มรหัสโครงสร้าง Photoswipe ลงในรูปภาพที่คุณต้องการเรียกดู สิ่งที่คุณต้องใส่ใจที่นี่คือ
Data-PSWP-UID จะต้องไม่ซ้ำกันในแต่ละอัลบั้ม ขนาดข้อมูลคือความกว้างและความสูงของภาพเมื่อขยาย หากความกว้างและความสูงที่ระบุไม่ตรงกับภาพรูปภาพที่แสดงจะผิดรูป ไม่มีวิธีลบขนาดข้อมูล แต่ถ้าคุณมีเวลาคุณสามารถหาทางเลือกได้
<!-data-pswp-uid ต้องไม่ซ้ำกันในแต่ละอัลบั้ม ขนาดข้อมูลระบุความกว้างและความสูงของภาพเมื่อซูมเข้า-> <div data-pswp-uid = "1"> <รูป> <a href = "img/m3.jpg" data-size = "670x712"> <img src = "img/th1.jpg"
4. เพิ่มรหัส JS ผู้เขียนรหัสนี้ยังไม่ได้รวมเข้ากับเฟรมเวิร์ก Photoswipe เขาต้องการเพิ่มด้วยตนเองในหน้าเว็บ
<script type = "text/javascript"> var initphotoswipeFromdom = function (gallerySelector) {// แยกวิเคราะห์ข้อมูลสไลด์จากองค์ประกอบ DOM (url, ชื่อ, ขนาด ... ) // (children of GallerySelector) var parsethumbnailements = function (el) ขนาดรายการ; สำหรับ (var i = 0; i <numnodes; i ++) {figure = thumbelements [i]; // <mige> องค์ประกอบ // รวมเฉพาะโหนดองค์ประกอบถ้า (figure.nodeType! == 1) {ดำเนินการต่อ; } 25 linkel = figure.children [0]; // <a> ขนาดองค์ประกอบ = linkel.getAttribute ('data-size'). split ('x'); // สร้างรายการวัตถุสไลด์ = {src: linkel.getAttribute ('href'), w: parseint (ขนาด [0], 10), h: parseint (ขนาด [1], 10)}; if (figure.children.length> 1) {// <potcaption> content item.title = figure.children [1] .innerhtml; } if (linkel.children.length> 0) {// <img> โหนด Thumbnail, ค้นหา URL Thumbnail item.msrc = linkel.children [0] .getAttribute ('src'); } item.el = รูปร่าง; // บันทึกองค์ประกอบลิงค์สำหรับ getThumbBoundsfn items.push (รายการ); } รายการส่งคืน; - // ค้นหาโหนดพาเรนต์ที่ใกล้ที่สุด var ใกล้เคียงที่สุด = ฟังก์ชั่นใกล้เคียงที่สุด (el, fn) {return el && (fn (el)? el: ใกล้ที่สุด (El.ParentNode, fn)); - // เมื่อผู้ใช้คลิกรูปขนาดย่อให้ทริกเกอร์ var onthumbnailsclick = function (e) {e = e || window.event; E.PreventDefault? E.preventDefault (): e.returnValue = false; var etarget = e.target || E.Srelement; // ค้นหาองค์ประกอบรูทของสไลด์ var clickedListItem = ใกล้เคียงที่สุด (etarget, ฟังก์ชัน (el) {return (el.tagname && el.tagname.touppercase () === 'รูป');}); if (! clickedlistitem) {return; } // ค้นหาดัชนีของรายการที่คลิกโดยวนซ้ำผ่านโหนดเด็กทั้งหมด // หรือคุณอาจกำหนดดัชนีผ่านข้อมูล- แอตทริบิวต์ var clickedGallery = clickedlistitem.parentNode, childNodes = clickedlistitem.parentNode.childNodes, numchildNodes = ChildNodes.length สำหรับ (var i = 0; i <numchildnodes; i ++) {ถ้า (childNodes [i] .nodeType! == 1) {ดำเนินการต่อ; } if (childNodes [i] === clickedListItem) {index = nodeIndex; หยุดพัก; } nodeIndex ++; } if (index> = 0) {// เปิด photoswipe ถ้าดัชนีที่ถูกต้องพบ openphotoswipe (ดัชนี, clickedGallery); } return false; - // ดัชนีรูปภาพและดัชนีแกลเลอรีจาก URL (#& pid = 1 & gid = 2) var photoswipeparsehash = function () {var hash = window.location.hash.substring (1), params = {}; if (hash.length <5) {return params; } vars vars = hash.split ('&'); สำหรับ (var i = 0; i <vars.length; i ++) {ถ้า (! vars [i]) {ดำเนินการต่อ; } var pair = vars [i] .split ('='); if (pair.length <2) {ดำเนินการต่อ; } params [pair [0]] = pair [1]; } if (params.gid) {params.gid = parseint (params.gid, 10); } return params; - var openphotoswipe = function (ดัชนี, galleryelement, disableanimation, fromurl) {var pswpelement = document.querySelectorall ('. pswp') [0], แกลเลอรี่, ตัวเลือก, รายการ; items = parsethumbnailelements (Galleryelement); // ตัวเลือกพารามิเตอร์ = {barssize: {top: 100, ด้านล่าง: 100}, fullscreenel: false, // ไม่ว่าจะเป็นปุ่มแบบเต็มหน้าจอ shareButtons: [{id: 'wechat', ฉลาก: 'แชร์ wechat', url: '#'}, {id: 'weibo', ฉลาก: รูปภาพ ', url:' {{raw_image_url}} ', ดาวน์โหลด: true}], // แชร์ปุ่ม // define ดัชนีแกลเลอรี่ (สำหรับ url) galleryuid: galleryelement.getattribute (' data-pswp-uid ') รายการ [index] .el.getElementsByTagname ('img') [0], // ค้นหารูปแบบหนึ่งหน้าแบบเลื่อนหน้า = window.pageyoffset || document.documentelement.scrolltop, rect = Thumbnail.getBoundingClientRect (); return {x: rect.left, y: rect.top + pageyscroll, w: rect.width}; - // photoswipe เปิดจาก url ถ้า (fromurl) {if (optupts.gallerypids) {// ดัชนีจริงแยกวิเคราะห์เมื่อใช้ pids แบบกำหนดเองสำหรับ (var j = 0; j <items.length; j ++) {ถ้า (รายการ [j] .pid == index) {on. index = j; หยุดพัก; }}} else {// ในดัชนี URL เริ่มต้นจาก 1 ตัวเลือก index = parseInt (ดัชนี, 10) - 1; }} else {options.index = parseInt (ดัชนี, 10); } // ออกหากไม่พบดัชนีถ้า (isnan (optopps.index)) {return; } if (disableanimation) {opotions.showanimationDuration = 0; } // ส่งข้อมูลไปยัง photoswipe และเริ่มต้นแกลเลอรี = ใหม่ Photoswipe (pswpelement, photoswipeui_default, รายการ, ตัวเลือก); Gallery.init (); - // วนผ่านองค์ประกอบแกลเลอรี่ทั้งหมดและผูกกิจกรรม var galleryelements = document.querySelectorall (GallerySelector); สำหรับ (var i = 0, l = galleryelements.length; i <l; i ++) {galleryelements [i] .setAttribute ('data-pswp-uid', i+1); Galleryelements [i] .onclick = onthumbnailsclick; } // Parse URL และ Open Gallery หากมี #& PID = 3 & gid = 1 var hashdata = photoswipeparsehash (); if (hashdata.pid && hashdata.gid) {openphotoswipe (hashdata.pid, galleryelements [hashdata.gid - 1], จริง, จริง); - // ดำเนินการด้านบนฟังก์ชั่น initphotoswipefromdom ('. my-gallery'); </script>บทความนี้ได้รวบรวมไว้ใน "สรุปทักษะการพัฒนา JavaScript WeChat" และทุกคนยินดีที่จะเรียนรู้และอ่าน
ฉันอยากจะแนะนำการสอนเกี่ยวกับโปรแกรม WeChat Mini ที่มีความกังวลอย่างมาก: "การสอนการพัฒนาโปรแกรม WeChat Mini" ได้รับการรวบรวมอย่างระมัดระวังโดยบรรณาธิการของทุกคนฉันหวังว่าคุณจะชอบ
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น