微信上 网页图片点击全屏放大

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

先上代码。

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格式就不用再转换了

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

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

时间: 2024-10-11 02:59:27

微信上 网页图片点击全屏放大的相关文章

模仿微信图片点击全屏效果

转载请注明出处:王亟亟的大牛之路 昨天想着模仿写些什么,然后觉得什么仿京东啊,仿美团之类的外面都有,正好又找到点资源就写了这篇"高仿微信图片放大" 废话不多说,先看下效果: 先是微信的 再是模仿的 包目录 先说下实现原理,再一步步分析 这里总共有2个Activity一个就是主页,一个就是显示我们图片效果的页面,参数通过Intent传送,素材内容均来自网络,(感谢聪明的蘑菇) 图片都是Glide异步下的,下的,下的重要的事情说三次,然后就是用动画做放大操作然后显示出来了(并没有做下载原图

可嵌入图片视频jQuery全屏滑块

分享一款可嵌入图片视频jQuery全屏滑块.这是一款可定制的滑块幻灯片代码,支持键盘箭头切换.效果图如下: 在线预览   源码下载 实现的代码. html代码: <script type="text/javascript" src="js/jquery-1.10.0.min.js"></script> <script type="text/javascript" src="js/Animo.min.js&q

kindedtor点击全屏变空白页面

kindeditor编辑器点击全屏后显示一片空白,打开调试有美容,发现行内样式有一条height:1px; 1. 查找页面包含的kindeditor JS 处理文件,找到height:1px;将之屏蔽即可.

jQuery炫酷点击变形全屏放大的模态窗口

这是一款效果非常炫酷的点击变形全屏放大的jQuery模态窗口插件.该模态窗口插件当用户点击某个按钮时,按钮先变形缩小变为圆形,然后在由小圆到大圆全屏放大,效果非常酷. 最后在生成模态窗口的时候的动画效果使用jquery和Velocity以及CSS3 transition 和 transformations共同完成. 在线演示:http://www.htmleaf.com/Demo/201501291297.html 下载地址:http://www.htmleaf.com/jQuery/Light

微信视频类H5 之自适应全屏

<!DOCTYPE html> <html> <head> <title>微信视频全屏播放</title> <meta name="viewport" content="width=device-width,width=640, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content=

tableViewCell上的图片点击,cell变灰,点击其它cell跳转的indexPath不对

在tableViewCell上有一张可以点击的图片,通过Target-Action给图片的imageView添加了点击事件. 但是,在点击图片实现放大效果的时候,图片的背景cell变灰,再次点击其它cell进行页面跳转时,协议方法中得indexPath是刚才点击图片的背景cell的indexPath,不是当前点击的 开始是在图片点击事件中 增加了让选中的cell失去选中状态,但是背景cell只是变灰了,没有选中的cell,所以这个方法不好用. 后来 在自定义的cell中增加了touchesBeg

网页frame引入实现全屏滚动,使用jquery实现浏览器兼容

近期做一个项目,其中有一个需求,就是网页中需要用frame引入页面并实现frame的全屏,在网上查了好多感觉方式都不尽相同,但是都不是介绍的很全面,浏览器的兼容也做的不好,自己总结了一些要点,需要的可以借鉴一下. html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&qu

android 在图库中进行幻灯片播放时图片不会全屏显示

1.在 Slideshowview.java 2.        @Override public void apply(GLCanvas canvas) { int viewWidth = getWidth(); int viewHeight = getHeight(); float initScale = Math.min((float) viewWidth / mWidth, (float) viewHeight / mHeight); // M: if special SUB_TYPE,

网页js,DIV全屏布局

<script type="text/javascript"> $(document).ready(function(){ findDimensions(); }); function findDimensions(){ var h = document.documentElement.clientHeight-120; $("#maincontent").css("height",h); } window.onresize=find