微信网页中点击图片放大

1、 引用微信的JS

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

2、初始化点击放大监听方法(加载完成后调用此方法)

 /*调用微信预览图片的方法*/
    function funcReadImgInfo(){
    var imgs = [];
        var imgObj = $(".userImg img");//这里改成相应的对象
    for(var i=0; i<imgObj.length; i++){
         imgs.push(imgObj.eq(i).attr(‘src‘));
         imgObj.eq(i).click(function(){
              var nowImgurl = $(this).attr(‘src‘);
                  WeixinJSBridge.invoke("imagePreview",{
               "urls":imgs,
               "current":nowImgurl
          });
             });
         }
    }

3、注意 
a.测试效果要在微信上测试(我在电脑浏览器测试会报错) 
b.如果在微信上测试,点击预览后出现一直在加载无法显示的情况,建议把图片的路径设置成全路径,

时间: 2024-11-09 15:31:30

微信网页中点击图片放大的相关文章

vivo手机的坑-禁止微信浏览器网页点击图片,图片会自动放大

这个坑让我郁闷极了,之前我的手机在微信浏览器打开网页点击图片时,啥事也没有 现在,咋回事,变了呢! 现在我打开微信浏览器网页面html,点击一个img标签的图片,图片会自动满屏放大,吓死宝宝了.其他人的手机就咋没有这个问题呢,我的pie手机 这种事情的发生有时候是让我高兴的,但是有时候是悲伤的(若是我需要给一个按钮添加点击事件且按钮里存在img标签时,太TMD悲伤了): 现在终于解决了这种事情的发生!!!! 移动端禁止图片长按和vivo手机点击img标签放大图片,禁止长按识别二维码或保存图片 i

非微信图文网页,微信浏览器点击图片弹出自带图片浏览 (原创请勿转载)

微信图文网页点击插入的图片,会在微信的图片浏览器上浏览图片可以放大缩小,但是自己做的网页没有这个功能,下面我就来介绍一下这个功能,做出一个完美一点的demo.如果不想看过程直接到最后看demo... 教程需要:脚本编辑器(记事本或者是notepad++.DW都可以).jquery.js.微信浏览器作为测试 如下图效果 我们用到的是微信内置JsAPI的一个,这个函数在微信的开发者平台文档里我没有找到,是在网上搜到的. WeixinJSBridge.invoke('imagePreview',{  

微信小程序点击图片放大预览

微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{{images}}" > <view wx:for="{{images}}"> <image src="{{item}}" data-src="{{item}}" bindtap="previewImage

jQuery实现的点击图片放大且在当前页面查看原图

jquery在当前页面查看原图,单击图片,显示出大图片,再次单击图片,恢复网页原有状态.不刷新页面的情况下查看原图,在网上类似的应用有很多.有时候朋友们说这是无刷新放大图片的功能,其实也就那么一回事吧,不过从本款代码来看,这功能实现起来并不太复杂,引入了jQuery,代码分享给大家. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT

点击图片放大至原始图片大小

有些时候为了排版的整洁,页面展示的图片不得不都是限定宽高的,如果想要点击图片放大至原始大小进行预览,再次点击回到原来样子,就要用到下面的代码了: var _w = parseInt($(window).width());//获取浏览器的宽度 $("#abc img").each(function(i){     var img = this;     var realWidth;//真实的宽度     var realHeight;//真实的高度     $("<img

点击图片放大功能

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>点击图片放大</title> <style type="text/css"> a img{border:0px;} .latentzoom { CURSOR: pointer; outline: none } .latentzoom-image { BORDER

js+jquery+html实现在三种不通的情况下,点击图片放大的效果

js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7

bug:在label中包含img,在IE中点击图片的时候,radio没有被选中,别的浏览器可以

bug:在label中包含img,在IE中点击图片的时候,按钮没有被选中,别的浏览器可以 代码如下: 1 <td class="left"> 2 <input type="radio" name="sex" id="boy"/> 3 <label for="boy" disabled=""><img src="images/boy.jp

ionic中点击图片看大图的实现

在页面上显示了几张图片后,因为是手机端,图片会有点小的感觉,就想着怎么样才能让用户点击小图片看到大图呢,项目中ionic结合angularjs实现了这个功能 1.首先是三张小图上应添加一个函数,当点击图片时触发大图,代码如下: HTML: <div class="row padding"> <div class="col" style="width: 100px;height: 100px;padding:3px;-webkit-box-