关于微信上网页图片点击全屏放大效果


Posted in Javascript onDecember 19, 2016

实现微信上网页的图片点击后全屏还可以可以缩放,这个功能是别人做的,可是捏点击后屏幕直接黑屏了,图片没有显示出来。这个代码在网上搜一下,挺多类似的。

先上代码。

function arrayToJson(o) {
  var r = [];
  if (typeof o == "string") return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
  if (typeof o == "object") {
    if (!o.sort) {
      for (var i in o)
        r.push(i + ":" + arrayToJson(o[i]));
      if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
        r.push("toString:" + o.toString.toString());
      }
      r = "{" + r.join() + "}";
    } else {
      for (var i = 0; i < o.length; i++) {
        r.push(arrayToJson(o[i]));
      }
      r = "[" + r.join() + "]";
    }
    return r;
  }
  return o.toString();
}
//这个是调用微信图片浏览器的函数
function imagePreview(curSrc, srcList) {
  if (!curSrc || !srcList || srcList.length == 0) {
    return;
  }
  WeixinJSBridge.invoke('imagePreview', {
    'current': curSrc,
    'urls': srcList
  });
};
(function ($) {
  var aa = [];
  var i = 0;
  var src = [];
  var json = null;
  aa = $(".img");
  for (i = 0; i < aa.length; i++) {
    src[i] = aa[i].src;  //把所有的src存到数组里
  }
  var srcList = arrayToJson(src); //转换成json并赋值给srcList
  $('.pro').click(function () {
    imagePreview(this.src, srcList);
  });
})(jQuery);

在微信web 开发者工具调试,网页上断点调试发现图片路径 json 格式化了两次!!!

最后解决的方法是没有调用 arrayToJson() 这个方法,直接调用 imagePreview  这个是微信提供的JsAPI 调用微信图片浏览器。

解释下每个方法的作用

这个是将图片路劲转为json格式的方法,如果已经是json格式就不用再转换了

关于微信上网页图片点击全屏放大效果

这个是调用微信图片浏览器的方法

关于微信上网页图片点击全屏放大效果

加载初始化参数以及点击调用方法

关于微信上网页图片点击全屏放大效果

以上所述是小编给大家介绍的关于微信上网页图片点击全屏放大效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript数组使用调用方法汇总
Dec 08 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
webpack4简单入门实例
Sep 06 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
在JavaScript中如何使用宏详解
May 06 Javascript
详解jQuery lazyload 懒加载
Dec 19 #Javascript
JS实现滑动门效果的方法详解
Dec 19 #Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 #Javascript
简单理解js的冒泡排序
Dec 19 #Javascript
JS瀑布流实现方法实例分析
Dec 19 #Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 #Javascript
JavaScript闭包和范围实例详解
Dec 19 #Javascript
You might like
php购物网站支付paypal使用方法
2010/11/28 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
python类继承与子类实例初始化用法分析
2015/04/17 Python
Python实现提取文章摘要的方法
2015/04/21 Python
Django的信号机制详解
2017/05/05 Python
python实现一组典型数据格式转换
2018/12/15 Python
详解Python做一个名片管理系统
2019/03/14 Python
python将时分秒转换成秒的实例
2019/12/07 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
员工年终演讲稿
2014/01/03 职场文书
保险公司演讲稿
2014/09/02 职场文书
确保工程质量承诺书
2015/04/29 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL