點擊圖片實現圖片放大：

 

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


//圖片點擊事件
$(".bigImg").click(function () {
var _this = $(this);//將當前的圖片元素作為_this傳入函數
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});


function imgShow(outerdiv,innerdiv,bigimg,_this){

//獲得當前圖片的src屬性
var src=_this.attr("src");

//將當前的圖片路徑賦值給bigimg
$(bigimg).attr("src",src);

//獲取當前點擊圖片的真實大小，並顯示彈出層及大圖
$("<img/>").attr("src",src).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>windowW*scale){

imgHeight=window*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及圖片

});

$(outerdiv).click(function(){//再次點擊淡出消失彈出層

$(this).fadeOut("fast");

});
}    

https://blog.csdn.net/qq_36375934/article/details/78952485