基本信息
源码名称：js实现手机端图片预览点击查看再点击关闭
源码大小：0.05M
文件格式：.zip
开发语言：js
更新时间：2019-11-15
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍

js实现手机端图片预览点击查看再点击关闭 


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片预览</title> </head> <script src="js/jquery-1.11.0.min.js"></script> <style> .img{ width: 100%; margin: 5%;
    }
    .img img{ border: 1px solid gray; width: 15%; margin: 4%;
    }
    .shadeImg{ padding-top: 20% !important; padding: 0 5%; position: fixed; display: none; width: 90%; height: 100%; top: 0; left: 0; z-index: 1000; text-align: center; background: rgba(0, 0, 0, 0.55);
    }
    .showImg{width: 100%; height: auto; /*margin-top: 50%;*/  }
    .img_div{height: 0;width: 0;}
    .shadeImg img{ background-color: #fff; height: 40%; width: auto;
    }
    .imga{ text-align: center; height: 100%
    } </style> <body> <div class="bo"> <div class="img"> <img src="img/1.png" onclick="inplot_bjq('img/1.png')"> <img src="img/2.png" onclick="inplot_bjq('img/2.png')"> <img src="img/3.png" onclick="inplot_bjq('img/3.png')"> <img src="img/4.png" onclick="inplot_bjq('img/4.png')"> </div> <div class="img"> <img src="img/1.png" onclick="inplot_bjq('img/1.png')"> <img src="img/2.png" onclick="inplot_bjq('img/2.png')"> <img src="img/3.png" onclick="inplot_bjq('img/3.png')"> <img src="img/4.png" onclick="inplot_bjq('img/4.png')"> </div> <div class="img"> <img src="img/1.png" onclick="inplot_bjq('img/1.png')"> <img src="img/2.png" onclick="inplot_bjq('img/2.png')"> <img src="img/3.png" onclick="inplot_bjq('img/3.png')"> <img src="img/4.png" onclick="inplot_bjq('img/4.png')"> </div> </div> <div class="img_div"></div> </body> <script> function inplot_bjq(e){ $(".img_div").empty(); var str=e; img_html ='<div class="shadeImg" onclick="javascript:closeShadeImg()" style="display: none;">'   '<div class="imga"><img class="showImg" src="'   str  '"></div></div></div>'; $(".img_div").append(img_html); lookBigImg(str) ;
    } function lookBigImg(b){ $(".shadeImg").fadeIn(500); $(".showImg").attr("src",b) // $(".showImg").attr("src",$(b).attr("src"))  } /*描述：关闭弹出层* */  function closeShade(){ $(".shade").fadeOut(500);
    } /*描述：关闭弹出层* */  function closeShadeImg(){ $(".shadeImg").fadeOut(500);
    } </script> </html>