话不多说，直接上代码吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery实现图片点击后居中放大</title>
<style>
*{
margin: 0;
padding: 0;
}
.drawing{
width: 150px;
margin: 10px;
}
.drawing:hover{
cursor: zoom-in;
}
.wrapper{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-color: rgba(52, 52, 52, 0.8);
background-size: 50%;
}
.wrapper:hover{
cursor: zoom-out;
}
</style>
</head>
<body>
<div class="container">
<img class="drawing" src="../image/20211012/1634028953.jpg" title="大图" />
<img class="drawing" src="../image/20211012/1634028953.jpg" title="大图" />
<img class="drawing" src="../image/20211012/1634028953.jpg" title="大图" />
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(function(){
$('.drawing').click(function(){
//查看大图
$(this).after("<div class='wrapper'></div>");
var imgSrc = $(this).attr('src');
$(".wrapper").css("background-image", "url(" + imgSrc + ")");
$('.wrapper').fadeIn(1000);
//关闭并移除图层
$('.wrapper').click(function(){
$('.wrapper').fadeOut(1000).remove();
});
});
});
</script>
</html>