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

前端之家收集整理的这篇文章主要介绍了关于微信上网页图片点击全屏放大效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

先上代码

调用微信图片浏览器的函数 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格式就不用再转换了

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

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

以上所述是小编给大家介绍的关于微信上网页图片点击全屏放大效果。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/js/43393.html

猜你在找的JavaScript相关文章