zoukankan      html  css  js  c++  java
  • 微信企业号办公系统-图片预览放大功能-previewImage

    在微信里看过文章的应该知道,文章里的图片点击后可以放大、分享和保存。

    然而自己在微信里开发的网页,里面的图片点击后没办法实现这个效果,然后就去看了下微信JS文档,里面有个previewImage可以调用。

    previewImage是微信客户端给内置浏览器增加的一个Javascript Interface,通过调用这个API,可以调起微信客户端提供的大图片查看组件。

    官方说明和例子:

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

      

    document.querySelector('#previewImage').onclick = function () {
      wx.previewImage({
        current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
        urls: [
          'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
          'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
          'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
        ]
      });
    };
    

      可以看出例子中的数据是写死在里面的,所以要自己写个JS,然后把指定div里面图片加载到wx.previewImage中

    <div id="previewImage">
    <img src="https://www.cnblogs.com/1.jpg"><img src="https://www.cnblogs.com/2.jpg" >
    </div>
    

      把图片链接都添加到wx.previewImage里

    <script>
        $(document).on('click', '#previewImage img',function(event) {
            var imgArray = [];
            var curImageSrc = $(this).attr('src');
            var oParent = $(this).parent();
            if (curImageSrc && !oParent.attr('href')) {
                $('#previewImage img').each(function(index, el) {
                    var itemSrc = $(this).attr('src');
                    imgArray.push(itemSrc);
                });
                wx.previewImage({
                    current: curImageSrc,
                    urls: imgArray
                });
            }
        });
    </script>
    

      效果图:

    多张图片支持左右滑动

    放大后

  • 相关阅读:
    JQuery中的id选择器含有特殊字符时,不能选中dom元素
    解决Mac下MySQL登录问题
    Mac 安装mysql
    禁止chrome浏览器自动填充表单的解决方案
    Eclipse 编译错误 Access restriction: The type 'JPEGCodec' is not API (restriction on required library 'C:Program FilesJavajre7lib t.jar')
    羊皮纸月亮计划
    ActionSupport.getText()方法
    linux入门经验之谈
    tomcat设置默认启动项
    网页设置下载apk
  • 原文地址:https://www.cnblogs.com/hjldare/p/5514728.html
Copyright © 2011-2022 走看看