微信中web页面实现和公众号中查看图片一样的效果
2016-12-05 15:30
633 查看
最近开发了一套资讯相关的web页面,嵌套在微信中,可支持点赞、评论等...在文章详情中,图片需要点击放大,随手势放大缩小,左右可滑动切换,总之类似于微信公众号效果。
开始想的方案是用轮播插件、或者在img外面套一层a标签,a标签的链接放图片链接。
那么我来总结一下这两种方案的优缺点:
使用轮播插件:
1、效果酷炫;
2、可支持多种操作,如:手势缩放、旋转、滑动切换...;
3、缺点则是,插件无疑加大的移动端加载效率;
4、安卓设备下支持性不佳,出现卡顿。
使用a标签方法:
1、使用简单;
2、也是调用微信自带的照片浏览器,加载效果高、同样支持缩放手势操作;
3、界面简陋~low;
4、新开链接,有明显跳走效果。
有没有一种解决方案可以取长补短的?要求不高只要跟公众号打开图片浏览效果一样就可以了。
答案是:有,使用previewImage。
那么这是个什么鬼呢?(微信开发-预览图片接口)
http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html#.E9.A2.84.E8.A7.88.E5.9B.BE.E7.89.87.E6.8E.A5.E5.8F.A3
以下是我项目中的代码:
最终效果:
就这样简简单单的实现了预期的效果☺
开始想的方案是用轮播插件、或者在img外面套一层a标签,a标签的链接放图片链接。
那么我来总结一下这两种方案的优缺点:
使用轮播插件:
1、效果酷炫;
2、可支持多种操作,如:手势缩放、旋转、滑动切换...;
3、缺点则是,插件无疑加大的移动端加载效率;
4、安卓设备下支持性不佳,出现卡顿。
使用a标签方法:
1、使用简单;
2、也是调用微信自带的照片浏览器,加载效果高、同样支持缩放手势操作;
3、界面简陋~low;
4、新开链接,有明显跳走效果。
有没有一种解决方案可以取长补短的?要求不高只要跟公众号打开图片浏览效果一样就可以了。
答案是:有,使用previewImage。
那么这是个什么鬼呢?(微信开发-预览图片接口)
http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html#.E9.A2.84.E8.A7.88.E5.9B.BE.E7.89.87.E6.8E.A5.E5.8F.A3
以下是我项目中的代码:
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script> //先引用微信api开发的js库 <?php $app=app('EasyWeChat\\Foundation\\Application'); $js = $app->js; ?> <script type="text/javascript" charset="utf-8"> wx.config(<?php echo $js->config(array('previewImage')) ;?>); //配置方法 wx.ready(function(){ //微信读取 var srcList = []; $.each($('.info_detail .container img'),function(i,item){ //$('.info_detail .container img') 容器中的图片 if(item.src) { srcList.push(item.src); $(item).click(function(e){ // 通过这个API就能直接调起微信客户端的图片播放组件了 wx.previewImage({ current: this.src, urls: srcList }); }); } }); }); </script>
最终效果:
就这样简简单单的实现了预期的效果☺
相关文章推荐
- Android 中 WebView 与 js 简单交互实现图文混排效果,解决图片自适应屏幕与查看大图问题
- Android 中 WebView 与 js 简单交互实现图文混排效果,解决图片自适应屏幕与查看大图问题
- 意外发现--玩“JS实现的页面滚动图片加载”效果
- 页面图片浮动左右滑动效果实现案例
- Android切换页面效果的实现二:WebView+ViewPager
- qt程序实现多个图片连续显示效果像动画一样
- 用ajaxterm实现web页面查看任意服务器远程管理卡console输出 | NoOps
- js如何给页面中所有的img对象加上onclick事件,且实现在新窗体中查看该图片文件
- 用来实现Web页面图片移动托拽的代码段
- JQuery页面图片切换和新闻列表滚动效果的具体实现
- 实现跳转到“微信公众账号”并打开添加某个固定微信用户为好友的页面(接口被封了,已经不可用)
- JQuery页面图片切换和新闻列表滚动效果的具体实现
- [VB.NET]请问如何在picturebox中实现幻灯片查看图片效果
- 实现手机扫描二维码页面登录,类似web微信-第二篇,关于二维码的自动生成
- 实现手机扫描二维码页面登录,类似web微信-第四篇,服务器端
- 【web前端】JavaScript实现图片幻灯片滚动播放动画效果
- QQ空间图片查看效果实现
- 实现手机扫描二维码页面登录,类似web微信-第一篇,业务分析
- android 自定义ScrollView实现背景图片伸缩(仿多米,PaPa个人页面特效也称为阻尼效果)
- JQuery实现页面企业广告图片切换和新闻列表滚动效果