美文网首页
微信文章中图片点击放大,可滑动(补全路径)

微信文章中图片点击放大,可滑动(补全路径)

作者: 王远清orz | 来源:发表于2019-05-10 19:22 被阅读0次
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    
    <script>
    
      // 点击查看大图
    
      function funcReadImgInfo() {
    
        var imgs = [];
    
        var imgObj = $('.rich-media img');//这里改成相应的对象
        var protocol = window.location.protocol;//获取协议
        var host = window.location.host;//获取主地址
        var port = window.location.port;//获取端口
    
        for (var i = 0; i < imgObj.length; i++) {
    
          var src = imgObj.eq(i).attr('src');
          //判断地址是否有http开头,如果没有补全路径
          src = src.substr(0, 4).toLowerCase() == "http" ? src : protocol + '//' + host + src;
    
          imgs.push(src);
    
          imgObj.eq(i).click(function () {
    
            var nowImgurl = $(this).attr('src');
            nowImgurl = nowImgurl .substr(0, 4).toLowerCase() == "http" ? nowImgurl : protocol + '//' + host + nowImgurl ;//改大图的地址,不加会导致本地上传图片,点击查看显示第一张
            console.log(nowImgurl)
            WeixinJSBridge.invoke("imagePreview", {
    
              "urls": imgs,
    
              "current": nowImgurl
    
            });
    
          });
    
        }
    
      }
    
      funcReadImgInfo();
    </script>
    

    注意
    a.图片用绝对路径,用相对路径会访问不到;
    b.测试效果要在微信上测试(在电脑浏览器测试会报错,在微信开发者工具点击图片没有效果)

    相关文章

      网友评论

          本文标题:微信文章中图片点击放大,可滑动(补全路径)

          本文链接:https://www.haomeiwen.com/subject/qalzoqtx.html