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


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 相关文章推荐
js 获取Listbox选择的值的代码
Apr 15 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
js的2种继承方式详解
Mar 04 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 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 面向对象 PHP5 中的常量
2010/05/05 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
19个Android常用工具类汇总
2014/12/30 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
javascript 写类方式之六
2009/07/05 Javascript
JQuery 小练习(实例代码)
2009/08/07 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
python练习程序批量修改文件名
2014/01/16 Python
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
Django实现分页显示效果
2019/10/31 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
天网面试题
2013/04/07 面试题
交警个人先进事迹材料
2014/05/11 职场文书
保护水资源的标语
2014/06/17 职场文书
党课心得体会范文
2014/09/09 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
公司财务部岗位职责
2015/04/14 职场文书
医学会议开幕词
2016/03/03 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
python 中的jieba分词库
2021/11/23 Python