h5 photoswipe插件使图片预览仿照微信可放大缩小

外链需要的文件：<link rel="stylesheet prefetch" href="css/photoswipe.css">
<link rel="stylesheet prefetch" href="css/default-skin.css"><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/photoswipe.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/photoswipe-ui-default.min.js" type="text/javascript" charset="utf-8"></script>H5：自己的写的代码<div id="earthquakeHome"><h3>▎速报信息 ▎</h3><div class="info"><p>据中国地震台网正式测定：</p><p>北京时间2020-04-24 08:12:12在上海市浦东新区发生6.5级地震，震源深度10.0公里，震中位于东经121.12度，北纬31.0度。</p></div><div class="infoImage"><img src="img/two.jpg" onclick="toBigPic(this)"></div><h3>▎震区烈度 ▎</h3><div class="infoImage"><img src="img/two.jpg" onclick="toBigPic(this)"></div><div class="info"><p>震区面积估算：</p><table border="1" cellspacing="0" cellpadding="0"><tr><th>烈度(度)</th><th>面积(平方公里)</th></tr><tr><td>Ⅰ(1)</td><td>7979</td></tr><tr><td> Ⅱ(2)</td><td>7979</td></tr><tr><td>Ⅲ3(3)</td><td>7979</td></tr></table></div><div class="info"><p>烈度对比参考：</p><ul><li>1-3度：人无感受，仅仪器能感受到；</li><li>3-4度：夜深人静时人有感受；</li><li>4-5度：睡觉的人惊醒，吊灯摆动；</li><li>6-7度：器皿倾倒，房屋轻微损坏；</li><li>7-9度：房屋破坏，地面裂缝；</li><li>9-10度：房屋倒塌，地面破坏严重；</li><li>11-12度：毁灭性的破坏；</li></ul></div><h3>▎震区城市 ▎</h3><div class="infoImage"><img src="img/three.jpg" onclick="toBigPic(this)"></div><div class="info"><table border="1" cellspacing="0" cellpadding="0"><tr><th>名称</th><th>距离(公里)</th></tr><tr><td>黄浦区</td><td>3</td></tr><tr><td>徐汇区</td><td>112</td></tr><tr><td>长宁区</td><td>12</td></tr><tr><td>静安区4</td><td>6</td></tr><tr><td>普陀区</td><td>10</td></tr><tr><td>虹口区</td><td>14</td></tr><tr><td>杨浦区</td><td>23</td></tr><tr><td>闵行区</td><td>33</td></tr><tr><td>宝山区</td><td>42</td></tr><tr><td>嘉定区3</td><td>3</td></tr><tr><td>浦东新区</td><td>14</td></tr><tr><td>金山区</td><td>32</td></tr><tr><td>松江区</td><td>23</td></tr><tr><td>青浦区</td><td>14</td></tr><tr><td>奉贤区</td><td>14</td></tr></table></div><h3>▎历史地震 ▎</h3><div class="infoImage"><img src="img/four.png" onclick="toBigPic(this)"></div><div class="info"><p>历史上震区工发生：4级以上地震有2个；最大的地震为：2015-05-07巴布亚新几内亚7.1级地震</p></div><h3>▎震区交通 ▎</h3><div class="defultImage"><h5>震中附近交通分布图</h5><div class="listImage"><img src="img/5.jpg" onclick="toBigPic(this)"><img src="img/6.jpg" onclick="toBigPic(this)"></div><h5>震中附近地铁分布图</h5><div class="listImage"><img src="img/7.jpg" onclick="toBigPic(this)"><img src="img/8.jpg" onclick="toBigPic(this)"></div></div><h3>▎震区人口 ▎</h3><div class="infoImage"><img src="img/9.jpg" onclick="toBigPic(this)"><img src="img/10.jpg" onclick="toBigPic(this)"></div><h3>▎震区建筑物 ▎</h3><div class="infoImage"><img src="img/11.jpg" onclick="toBigPic(this)"><img src="img/12.jpg" onclick="toBigPic(this)"></div><h3>▎震区危险源 ▎</h3><div class="infoImage"><img src="img/13.jpg" onclick="toBigPic(this)"><img src="img/14.jpg" onclick="toBigPic(this)"></div><h3>▎震区地震台站 ▎</h3><div class="infoImage"><img src="img/15.jpg" onclick="toBigPic(this)"><img src="img/16.jpg" onclick="toBigPic(this)"></div></div>H5：插件代码需要粘贴在body里，固定写法<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"><div class="pswp__bg"></div><div class="pswp__scroll-wrap"><div class="pswp__container"><div class="pswp__item"></div><div class="pswp__item"></div><div class="pswp__item"></div></div><div class="pswp__ui pswp__ui--hidden" style="display: no;"><div class="pswp__top-bar"><div class="pswp__counter"></div><button class="pswp__button pswp__button--close" title="Close (Esc)"></button><button class="pswp__button pswp__button--share" title="Share" style="display:none;"></button><button class="pswp__button pswp__button--fs" title="Toggle fullscreen" style="display:none;"></button><button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button><div class="pswp__preloader"><div class="pswp__preloader__icn"><div class="pswp__preloader__cut"><div class="pswp__preloader__donut"></div></div></div></div></div><div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"><div class="pswp__share-tooltip"></div></div><div class="pswp__caption"><div class="pswp__caption__center"></div></div></div></div></div>js：function toBigPic(pos) {var object = $(pos);var index = $("#earthquakeHome img").index(object);var pswpElement = document.querySelectorAll('.pswp')[0];var items = [];var getItems = function() {var aDiv = document.getElementById("earthquakeHome");var leng = $("#earthquakeHome img").length;if (aDiv.hasChildNodes()) {for (var i = 0; i < leng; i++) {var img = $("#earthquakeHome img");var item = {src: img[i].src,w: img[i].naturalWidth,h: img[i].naturalHeight};items.push(item);}}      };getItems();var options = {history: false,focus: false,index: index,showAnimationDuration: 0,hideAnimationDuration: 0};var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);gallery.init();}

demo地址：hotoswipe仿微信放大缩小图片，图片预览功能_photoswipe.js-互联网文档类资源-CSDN下载