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>
评论