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" οnclick="toBigPic(this)">
</div>
<h3>▎震区烈度 ▎</h3>
<div class="infoImage">
<img src="img/two.jpg" οnclick="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" οnclick="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" οnclick="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" οnclick="toBigPic(this)">
<img src="img/6.jpg" οnclick="toBigPic(this)">
</div>
<h5>震中附近地铁分布图</h5>
<div class="listImage">
<img src="img/7.jpg" οnclick="toBigPic(this)">
<img src="img/8.jpg" οnclick="toBigPic(this)">
</div>
</div>
<h3>▎震区人口 ▎</h3>
<div class="infoImage">
<img src="img/9.jpg" οnclick="toBigPic(this)">
<img src="img/10.jpg" οnclick="toBigPic(this)">
</div>
<h3>▎震区建筑物 ▎</h3>
<div class="infoImage">
<img src="img/11.jpg" οnclick="toBigPic(this)">
<img src="img/12.jpg" οnclick="toBigPic(this)">
</div>
<h3>▎震区危险源 ▎</h3>
<div class="infoImage">
<img src="img/13.jpg" οnclick="toBigPic(this)">
<img src="img/14.jpg" οnclick="toBigPic(this)">
</div>
<h3>▎震区地震台站 ▎</h3>
<div class="infoImage">
<img src="img/15.jpg" οnclick="toBigPic(this)">
<img src="img/16.jpg" οnclick="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地址：https://download.****.net/download/qq_35363709/12440020