首页 > 代码库 > 微信端网页中图片的展示方式

微信端网页中图片的展示方式

2024-07-13 17:12:19   217人阅读

一、微信端网页中图片的展示方式

　　微信端网页中图片有两种展示方式：平铺与图集。平铺的时候文档内的所有图片全部展开，点击图片则放大。图集的时候只展示一张图片，点击图片的时候以翻页的方式展示一组图片。实现原理对于如下一个图片标签,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>

这里定义了两组图片组，在微信段查看就可正常运行。在普通浏览器中点击图片会提示使用微信查看。


联系
我们