ปลั๊กอิน Photoswipe สามารถรับรู้การซูมเต็มหน้าจอบนโทรศัพท์มือถือและดับเบิลคลิกที่ภาพเพื่อขยายภาพ
Photoswipe Plugin เว็บไซต์ทางการ http://www.photoswipe.com/
ภาพเทอร์มินัลมือถือของ Photoswipe ขยายและมุมมองสไลด์เพื่อสลับไปยังภาพถัดไปและบันทึกรูปภาพไปยังท้องถิ่น
<style> .pnav {margin-top: 30px; text-allign: center; line-height: 24px; FONT-SIZE: 16PX} .PNAV A {padding: 4px} .pnav a.cur {พื้นหลัง:#007bc4; สี: #fff;}. ตัวอย่าง {ความกว้าง: 80%; มาร์จิ้น: 10px auto}/*สไตล์ที่ต้องการ*/#Photos {width: 150px; ชายแดน: 1px Solid #D3D3D3; มาร์จิ้น: 20px auto; TEXT-ALGING: CENTER; PADDING: 4PX; เคอร์เซอร์: ตัวชี้ตำแหน่ง: สัมพัทธ์} #PHOTOS P {ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 0; ซ้าย: 0; การเติม: 4px; พื้นหลัง:#000; สี: #ffff} .my-gallery {width: 100%; ลอย: ซ้าย;}. my-gallery img {width: 100%; ความสูง: auto;}. รูปของ my-gallery {display: block; ลอย: ซ้าย; มาร์จิ้น: 0 5px 5px 0; ความกว้าง: 150px;}. my-gallery figcaption {display: none;} </style>รหัส JS:
<script type = "text/javascript"> var openphotoswipe = function () {var pswpelement = document.QuerySelectorAll ('. PSWP') [0]; รายการ var = [{src: 'images/s1.jpg', w: 800, h: 1142}, {src: 'images/s2.jpg', w: 800, h: 1142}, {src: 'images/s3.jpg', w: 800, h: 1142} 1142}, {src: 'images/s4.jpg', w: 800, h: 1142}, {src: 'images/s5.jpg', w: 800, h: 1142}]; ตัวเลือก var = {ประวัติ: เท็จ, โฟกัส: เท็จ, showanimationDuration: 0, hideanimationDuration: 0}; var gallery = ใหม่ Photoswipe (pswpelement, photoswipeui_default, รายการ, ตัวเลือก); Gallery.init ();}; document.getElementById ('Photos'). onClick = OpenPhotoswipe; </script>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น