微信图片预览

微信公众号开发中,点击查看大图,

其实不需要再写js效果直接调用微信app的预览功能即可

用例:

<script>
//图片列表
var picList = ["http:\\content.52pk.com\it.jpg",
"http:\\img.pconline.com.cn\80.jpg"];

WeixinApi.ready(function(a){
   var b=function(){
           a.imagePreview(picList[0],picList);
       };
       $("#btn").click(function(c){
         b();
       });
       b(); //循环执行图片预览函数
 });
</script>

当然新版jssdk 也有图拍呢预览功能(需要jssdk验证):

wx.previewImage({
    current: '', // 当前显示图片的http链接
    urls: [] // 需要预览的图片http链接列表
});

效果:

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-13 16:21:11

微信图片预览的相关文章

PHP仿微信多图片预览上传功能

PHP仿微信多图片预览下载演示地址:http://www.erdangjiade.com/js...生产图片区域,上传按钮#btn可替换自己想要的图片 [html] view plain copy在CODE上查看代码片派生到我的代码片 <ul id="ul_pics" class="ul_pics clearfix"> <li><img src="logo.png" id="btn" class=

微信小程序的实现图片预览功能

index.wxml <image src="../../images/01.jpg"class="userinfo-avatar" bindtap="previewImg01" background-size="cover"mode="aspectFill"></image> index.js //图片预览功能 previewImg01: function (event) { va

微信小程序点击图片预览-wx.previewImage

<view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='img' src='{{item}}' data-index='{{index}}' bindtap='previewImg'></image> </view> </view> Page({ /** * 页面的初始数据 */ data: { imgArr:[ 'http:

Android 手势检测实战 打造支持缩放平移的图片预览效果(下)

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39480503,本文出自:[张鸿洋的博客] 上一篇已经带大家实现了自由的放大缩小图片,简单介绍了下Matrix:具体请参考:Android 手势检测实战 打造支持缩放平移的图片预览效果(上):本篇继续完善我们的ImageView~~ 首先加入放大后的移动~~ 1.自由的进行移动 我们在onTouchEvent里面,加上移动的代码,当然了,必须长或宽大于屏幕才可以移动~~~ @Ov

android 图片选择器 图片预览

需求:近段时间公司有要求写一个类似于微信发送图片时,用来选择照片的一个图片浏览器,本来想在网上找一个直接拿来用,找寻无果,只能自己写了.相信有很多网页也有这样的需求,这里我将写好的源码打包成library工程分享给大家!! 转载请注明出处:http://blog.csdn.net/a740169405/article/details/41622025 说明: ①本来打算自己写图片异步加载代码,后来因为赶时间,就改成直接引用开源框架universal-image-loader,一个        

html css 图片居中(水平居中和垂直居中),移动端图片预览

做网站的时候,经常会遇到因图片宽高比率不一致导致图片显示方式有问题. 1.在图片宽高未知的情况下,图片上下左右居中   我以前的博客文章有写过,就不再重复了.博客地址,效果预览地址(欢迎copy) 上面的虽然没问题,但是在图片列表里,图片上下左右不对齐,造成图片列表排版很难看,产品要求宽高定死,也就是下面的第二种方法. 2.在图片宽高未知的情况下,img标签 宽高固定显示(图片会变形) 效果预览地址(欢迎copy) 因为第二种方法,宽高定死,导致图片变形了,反而不美. 产品说:我要图片不失真,又

jquery实现上传图片及图片大小验证、图片预览效果代码

jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture(){     var file = $('file_c').value;     if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){            alert("图片类型必须是.gif,jpeg,jpg,png中的一种")        }else{      $('both_form')

图片预览

下方点击小图标,上方显示大图标. 布局文件如下 <body> <h1>图片预览</h1> <p> <img id="largeImg" src="images/img1-lg.jpg" alt="Large Image" /> </p> <p class="thumbs"> <!-- 点击小图片 看到大图片 只是超连接的话 会新打开页面,

Uploadify—借助Uploadify插件实现图片预览时如何解决Chrome浏览器报“喔唷,崩溃啦”

今天借助Uploadify插件实现了图片预览及其上传的功能,可是在Chrome浏览器中会时不时地出现如下图所示的情况: 解决方法:使用这种方法引用该插件js文件: <script type="text/javascript"> document.write("<script type='text/javascript' src='<%=basePath %>js/uploadify/jquery.uploadify.min.js?" +