一、微信端网页中图片的展示方式
微信端网页中图片有两种展示方式：平铺与图集。平铺的时候文档内的所有图片全部展开，点击图片则放大。图集的时候只展示一张图片，点击图片的时候以翻页的方式展示一组图片。实现原理对于如下一个图片标签,data-gid用于存放组标识，同一组的data-gid相同。data-index用于存放组中图片的展示顺序，不能相同。onclick中根据data-src处理图片展示。对于图集就只显示一张其他的img设置为隐藏，src与第一个图片一样，或者为空，这样可以减少网页的加载量，提高访问效率。data-src保存图片的真正访问路径。
<img src="http://c.hiphotos.baidu.com/image/pic/item/43a7d933c895d143175ffe2971f082025aaf078a.jpg" data-src="http://c.hiphotos.baidu.com/image/pic/item/43a7d933c895d143175ffe2971f082025aaf078a.jpg" data-gid="g2" data-index="1" onclick="showImg(‘g2‘, 1);">
二、图集的实现
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 </head>
5 <body>
6 <img src="http://file4.mafengwo.net/M00/1C/D7/wKgBm07XPbnSQZx0AAIqMAJ8jKk61.m_rbook_comment.w475.jpeg" data-src="http://file4.mafengwo.net/M00/1C/D7/wKgBm07XPbnSQZx0AAIqMAJ8jKk61.m_rbook_comment.w475.jpeg" onclick="showImg(1,1);" data-gid="1" data-index="1">
7 <img src="http://file4.mafengwo.net/M00/1C/D7/wKgBm07XPbnSQZx0AAIqMAJ8jKk61.m_rbook_comment.w475.jpeg" data-src="http://file20.mafengwo.net/M00/03/26/wKgB3FDkRIiAAyvuABQ-Je1TOyw16.rbook_comment.w235.jpeg" style="display:none;" onclick="showImg(1,2);" data-gid="1" data-index="2">
8 <img src="http://file4.mafengwo.net/M00/1C/D7/wKgBm07XPbnSQZx0AAIqMAJ8jKk61.m_rbook_comment.w475.jpeg" data-src="http://file21.mafengwo.net/M00/BE/89/wKgB3FE63pWAApk2AANestUDQdA39.rbook_comment.w235.jpeg" style="display:none;" onclick="showImg(1,3);" data-gid="1" data-index="3">
9 <img src="http://file4.mafengwo.net/M00/1C/D7/wKgBm07XPbnSQZx0AAIqMAJ8jKk61.m_rbook_comment.w475.jpeg" data-src="http://file25.mafengwo.net/M00/11/66/wKgB4lMK7gqAFTYQAALmxMPzzAc91.rbook_comment.w235.jpeg" style="display:none;" onclick="showImg(1,4);" data-gid="1" data-index="4"> <br>
10
11 <img src="http://file4.mafengwo.net/M00/8C/3D/wKgBm04CpfHu_HchAAGYp2Llh6A18.rbook_comment.w235.jpeg" data-src="http://file4.mafengwo.net/M00/8C/3D/wKgBm04CpfHu_HchAAGYp2Llh6A18.rbook_comment.w235.jpeg" onclick="showImg(‘a‘,1);" data-gid="a" data-index="1">
12 <img src="http://file4.mafengwo.net/M00/8C/3D/wKgBm04CpfHu_HchAAGYp2Llh6A18.rbook_comment.w235.jpeg" data-src="http://file20.mafengwo.net/M00/A4/2E/wKgB3FDvuzyARycuAAY-YDf0uJ409.rbook_comment.w235.jpeg" style="display:none;" onclick="showImg(‘a‘,2);" data-gid="a" data-index="2">
13
14 <script type="text/javascript">
15
16 var imgDate = {};//二位数组，保持图片的组别，顺序和地址信息
17 var imgs = document.getElementsByTagName("img");
18 for(var i = 0; i < imgs.length; i++){
19 var img = imgs[i];
20 var index = img.getAttribute("data-index");//存放索引
21 var gid = img.getAttribute("data-gid");//组号 data-gid 存放组号
22 var dsrc = img.getAttribute("data-src");//地址
23 if(index && gid && dsrc){
24 imgDate[gid] = imgDate[gid]||[]; //该组不存在则创建
25 imgDate[gid][index] = dsrc;//按照索引设置地址
26 }
27 }
28 //点击图片时调用，groupid组号，index索引号
29 function showImg(groupid, index) {
30 if (typeof window.WeixinJSBridge != ‘undefined‘) {
31 WeixinJSBridge.invoke(‘imagePreview‘, {
32 ‘current‘ : imgDate[groupid][index],//当前地址
33 ‘urls‘ : imgDate[groupid] //组
34 });
35 }else{
36 alert(groupid+"请在微信中查看"+index, null, function(){});
37 }
38 }
39 </script>
40 </body>
41 </html>
这里定义了两组图片组，在微信段查看就可正常运行。在普通浏览器中点击图片会提示使用微信查看。
时间： 2024-10-10 13:56:56