參考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");
});
}