يمكن أن يدرك Photoswipe Plug-in تكبير الشاشة على الهاتف المحمول والنقر نقرًا مزدوجًا على الصورة لتكبير الصورة.
موقع Photoswipe Plugin الرسمي http://www.photoswipe.com/
تتكبير صورة المحطة المحمولة في PhotoRwipe ، وتنزلق للانتقال إلى الصورة التالية ، وحفظ الصورة إلى Local.
<style> .pnav {margin-top: 30px ؛ text-align: center ؛ line-line: 24px ؛ Font-Size: 16px} .pnav a {padding: 4px} .pnav a.cur {background:#007bc4 ؛ color: #fff ؛}. Demo {width: 80 ٪ ؛ الهامش: 10px Auto}/*المطلوب نمط*/#الصور {العرض: 150px ؛ الحدود: 1px الصلبة #D3d3d3 ؛ الهامش: 20px Auto ؛ النصوص النصية: المركز ؛ الحشو: 4px ؛ المؤشر: مؤشر ؛ الموضع: النسبية} #photos p {الموضع: absolute ؛ أسفل: 0 ؛ اليسار: 0 ؛ حشوة: 4px ؛ الخلفية:#000 ؛ اللون: #ffff} .my-gallery {width: 100 ٪ ؛ تعويم: اليسار ؛}. my-gallery img {width: 100 ٪ ؛ الارتفاع: Auto ؛} تعويم: اليسار. الهامش: 0 5px 5px 0 ؛ العرض: 150px ؛}.رمز JS:
<script type = "text/javaScript"> var openPhotOswipe = function () {var pswpelement = document.queryselectorall ('. pswp') [0] ؛ var heads = [{src: 'Images/S1.jpg' ، W: 800 ، H: 1142} ، {Src: 'Images/S2.jpg' ، W: 800 ، H: 1142} ، {Src: 'Images/S3.jpg' ، W: 800 ، H: } ، {src: 'Images/S4.jpg' ، W: 800 ، H: 1142} ، {src: 'Images/S5.jpg' ، W: 800 ، H: 1142}] ؛ Var Options = {History: false ، focus: false ، showAnimationDuration: 0 ، HideanimationDuration: 0} ؛ Var Gallery = New PhotoRipewipe (pswpelement ، photogswipeui_default ، عناصر ، خيارات) ؛ gallery.init () ؛} ؛ document.getElementById ('photos'). onClick = OpenPhotOswipe ؛ </script>ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.