参考地址：https://blog.csdn.net/qq_42249896/article/details/86569636
一、应用场景：点击图片可以对图片进行放大显示。
二、实现代码:
说明：我用上述网址的方法，放大可以，但是缩小图片的点击事件失效，所以稍微修改了一点。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--任一版本的jquery都可以-->
<script src="jquery-1.10.2.min.js"></script>
<style>
.enlargeImg_wrapper {
display: none;
position: fixed;
z-index: 999;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-color: rgba(52, 52, 52, 0.8);
background-size: 37%;
}
img:hover {
cursor: zoom-in;
}
.enlargeImg_wrapper:hover {
cursor: zoom-out;
}
</style>
</head>
<body>
<img class="enlargeImg" width="80" src="1.jpg" title="点击查看大图" />
<div class="imgBox"></div>
<script type="text/javascript">
$(function() {
enlargeImg();
})
//关闭并移除图层
function closeImg() {
$('.enlargeImg_wrapper').fadeOut(200).remove();
}
//查看大图
function enlargeImg() {
$(".enlargeImg").click(function () {
$('.imgBox').html("<div class='enlargeImg_wrapper'></div>");
var imgSrc = $(this).attr('src');
$(".enlargeImg_wrapper").css("background-image", "url(" + imgSrc + ")");
$('.enlargeImg_wrapper').fadeIn(200);
})
$('.imgBox').on('click', '.enlargeImg_wrapper', function () {
$('.enlargeImg_wrapper').fadeOut(200).remove();
})
}
</script>
</body>
</html>
