ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2019-07-22 19:06:30  阅读:228  来源: 互联网

标签:src strs 微信 JS html 大图 var thumbnailImg 图片


问题:

 

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

 

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

 

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

 

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

 

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

 

中间的过程有,

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

 

我还用了最简单的方法:

 

直接在点击图片时,打开这个图片的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>

 

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

标签:src,strs,微信,JS,html,大图,var,thumbnailImg,图片
来源: https://blog.csdn.net/weixin_44019016/article/details/96884945

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有