码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2014-07-23 22:22:57      阅读:2256      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   使用   

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

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

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

微信端网页中图片的展示方式,布布扣,bubuko.com

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

标签:style   blog   http   java   color   使用   

原文地址:http://www.cnblogs.com/always-online/p/3864101.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!