Photoswipeプラグインは、携帯電話でフル画面の拡大を実現し、画像をダブルクリックして画像を拡大できます。
Photoswipeプラグインの公式ウェブサイトhttp://www.photoswipe.com/
Photoswipeのモバイルターミナル画像が拡大してビューを発揮し、スライドして次の写真に切り替え、写真をローカルに保存します。
<style> .pnav {margin-top：30px; text-align：center; line-height：24px; font-size：16px} .pnav a {padding：4px} .pnav a.cur {background：＃007bc4; color：#fff;}。デモ{wid：80％;マージン：10px auto}/*必須スタイル*/＃写真{width：150px;境界線：1px Solid＃D3D3D3;マージン：20px Auto;テキストアライグ：センター;パディング：4px;カーソル：ポインター;位置：相対} #photos p {position：absolute;下：0;左：0;パディング：4px;背景：＃000; color：#ffff} .my-gallery {width：100％; float：左;}。私のgallery img {width：100％;高さ：auto;}。私のgallery図{display：block;フロート：左;マージン：0 5px 5px 0;幅：150px;}。私のgallery figcaption {display：none;} </style>JSコード：
<script type = "text/javascript"> var openphotoswipe = function（）{var pspelement = document.queryselectorall（ '。pswp'）[0]; var items = [{src： 'images/s1.jpg'、w：800、h：1142}、{src： 'images/s2.jpg'、w：800、h：1142}、{src： 'images/s3.jpg'、w：800、h：1142}、{src： 'src：' src： 'src：' himas 1142}、{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 Photoswipe（pswpelement、photoswipeui_default、アイテム、オプション）; Gallery.init（）;}; document.getElementById（ 'Photos'）。onclick = openPhotoswipe; </script>上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。