JS最简单的，微信移动端点击查看大图功能

问题：

 

客服说，客人在查看产品详情的时候，有些衣服尺寸图片看不清楚。

 

大概意思就是详情里，图片的字太小了，看不清楚。

 

但原尺寸的图片应该就是看清楚的。

 

现在的解决方案，就是，我只要把原图显示出来就可以了。

 

真以为很简单，结果还弄了我两三个小时。

 

中间的过程有，

不断的百度，不断的调试，但都有问题。

 

我还用了最简单的方法：

 

直接在点击图片时，打开这个图片的src路径，结果显示成这样

 

 

看来，是微信屏掉了阿里，或淘宝的直接访问了。

 

别的域名都没问题。

 

于是用了另外一个方法：

再做一个HTML文件，通过上一个页面提交过来的Request，再生成图片路径。

 

 

现在给出访问代码：

    <img alt='' src='https://img.alicdn.com/imgextra/i2/2315726334/O1CN01OjWj371wf1B1fXTei-23157263ff.jpg' class="thumbnailImg" />

    $(".thumbnailImg").click(function(event){

     

           location.href = "1.html?src=" + thisImg.src;

 

然后给出1.html 代码：

 

<img alt='' src='' class="thumbnailImg" />

<div id="mcoverThumbnail" onClick="document.getElementById('mcoverThumbnail').style.display='';" ></div>

 <script>

 var url = location.search; 

                    var theRequest = new Object();

                    if (url.indexOf("?") != -1) {

                        var str = url.substr(1);

                        strs = str.split("&");

                        for (var i = 0; i < strs.length; i++) {

                            theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);

                        }

                    }

                  

$(".thumbnailImg")[0].src=theRequest ["src"];

    $(".thumbnailImg").click(function(event){

        var thisImg = event.target;

      

       

            flag = false;

            $("#mcoverThumbnail").html("<img src='" + thisImg.src + "'" + " width='" + thisImg.width*1.5 + "' height='" + thisImg.height*1.5 + "' >");

            $("#mcoverThumbnail").show();

    

 

    });

</script>

 

原理只是多装载多一个页面（针对于阿里系）