<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.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: 50%;
}
img:hover {
cursor: zoom-in;
}
.enlargeImg_wrapper:hover {
cursor: zoom-out;
}
</style>
</head>
<body>
<img class="enlargeImg" width="80" src="1.jpg" title="点击查看大图" />
<img class="enlargeImg" width="80" src="2.jpg" title="点击查看大图" />
<img class="enlargeImg" width="80" src="3.jpg" title="点击查看大图" />
<script type="text/javascript">
$(function() {
enlargeImg();
})
function enlargeImg() {
$(".enlargeImg").click(function() {
$(this).after("<div onclick='closeImg()' class='enlargeImg_wrapper'></div>");
var imgSrc = $(this).attr('src');
$(".enlargeImg_wrapper").css("background-image", "url(" + imgSrc + ")");
$('.enlargeImg_wrapper').fadeIn(200);
})
}
function closeImg() {
$('.enlargeImg_wrapper').fadeOut(200).remove();
}
</script>
</body>
</html>
