参考https://blog.csdn.net/qq_36375934/article/details/78952485 的弹出框查看大图,同时总结自己遇到的问题,做个笔记
HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <link rel="stylesheet" href="${ctx}/resources/common/layui/css/layui.css"> <link rel="stylesheet" href="${ctx}/resources/common/lightbox2/css/lightbox.min.css"> </head> <body> <%--js源生大图的是弹出框的样式--%> <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;"> <div id="innerdiv" style="position:absolute;"> <img id="bigimg" style="border:5px solid #fff;" src=""/> </div> </div> <script src=js/jquery.js></script> <script src=js/index.js></script> </body> </html>
JS代码
只截取的append的html: var html = ''; html += '<li>'; if (suffix == 'jpg') { //data-lightbox="'+ box1 +'" 是引用框架lightbox进行图片轮播查看大图,只需要在jsp里面引入lightbox的css和js, // 然后在需要查看的标签加上data-lightbox="box1"即可,这里用了就可以不用源生点击查看大图了,二者选其一 html += ' <a href="' + encodeURI(show) + '" data-lightbox="'+ box1 +'" class="lookBigImg">' } else { html += ' <a href="' + encodeURI(show) + '" target="_blank" download="'+ filename +'" title="">' } //encodeURI(img)编码返回的超链接,以防特殊字符不能加载,我遇到的是上传的图片名带有特殊符号导致加载不出来 html += ' <div>' + '<img class="imgClass" src="' + (img.indexOf("http")===0?encodeURI(img):img) + '" alt="">' + '<input type="hidden" name="annexValue" value="' + ossPath + '">' + ' </div>' + '</a>' + '<a ><p>' + filename + '</p></a>' + '<span class="removeFile"></span>' + '</li>'; $("." + suffix + "_div").append(html); if (del) {//上传的调 removeFile(); // if (suffix == 'jpg'){//上传是图片类才绑定事件 // addLookBigImgClick(); // } } else {//回填数据调 $(".removeFile").hide(); }
功能实现:
//这是js源生查看大图写法 function addLookBigImgClick() { //查看大图,用到off("click")防止重复绑定click $(".lookBigImg").off("click").on("click",function () { var _this = $(this).find(".imgClass");//通过this来找自己的img标签imgClass,不能直接$(".imgClass") theLookBigImg($("#outerdiv"), $("#innerdiv"), $("#bigimg"),_this); }); } /** * 查看大图 */ function theLookBigImg(outerdiv, innerdiv, bigimg, _this) { var src = _this.attr("src");//获取当前点击的pimg元素中的src属性 $(bigimg).attr("src", src);//设置#bigimg元素的src属性 /*获取当前点击图片的真实大小,并显示弹出层及大图*/ console.log(src); $("<img/>").attr("src", src).on('load',function(){ var windowW = $(window).width();//获取当前窗口宽度 var windowH = $(window).height();//获取当前窗口高度 var realWidth = this.width;//获取图片真实宽度 var realHeight = this.height;//获取图片真实高度 var imgWidth, imgHeight; var scale = 0.8;//缩放尺寸,当图片真实宽度和高度大于窗口宽度和高度时进行缩放 if(realHeight>windowH*scale) {//判断图片高度 imgHeight = windowH*scale;//如大于窗口高度,图片高度进行缩放 imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度 if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度 imgWidth = windowW*scale;//再对宽度进行缩放 } } else if(realWidth>windowW*scale) {//如图片高度合适,判断图片宽度 imgWidth = windowW*scale;//如大于窗口宽度,图片宽度进行缩放 imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度 } else {//如果图片真实高度和宽度都符合要求,高宽不变 imgWidth = realWidth; imgHeight = realHeight; } $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放 var w = (windowW-imgWidth)/2;//计算图片与窗口左边距 var h = (windowH-imgHeight)/2;//计算图片与窗口上边距 $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性 $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg }); $(outerdiv).click(function(){//再次点击淡出消失弹出层 $(this).fadeOut("fast"); }); }