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


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 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 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
第十一节--重载
2006/11/16 PHP
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
PHP的5个安全措施小结
2012/07/17 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
重学JS之显示强制类型转换详解
2019/06/30 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
python设计模式大全
2016/06/27 Python
Python上下文管理器和with块详解
2017/09/09 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
python3判断url链接是否为404的方法
2018/08/10 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
数控技术应用个人求职信范文
2014/02/03 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
ktv筹备计划书
2014/05/03 职场文书
小区推广策划方案
2014/06/06 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
员工聘用合同范本
2015/09/21 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
CSS极坐标的实例代码
2021/06/03 HTML / CSS
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
德生2P3收音机开箱评测
2022/04/30 无线电
python playwrigh框架入门安装使用
2022/07/23 Python