简单的图片放大
<html>
<head>
<meta charset="UTF-8">
<title></title>
<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>
<script src="/jquery/3.3.1/jquery.js"></script>
<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="点击查看大图" />
<div class='enlargeImg_wrapper'></div>
<script type="text/javascript">
$(function() {
//点击查看大图
$(".enlargeImg").click(function() {
var imgSrc = $(this).attr('src');
$(".enlargeImg_wrapper").css("background-image", "url(" + imgSrc + ")");
$('.enlargeImg_wrapper').fadeIn(200);
})
//点击关闭大图
$(".enlargeImg_wrapper").click(function() {
$(this).fadeOut();
})
})
</script>
</body>
</html>
![点击查看大图](http://103.3.152.87:81/source/ico/dz_1.png)
![点击查看大图](http://103.3.152.87:81/source/ico/dz_3.png)
![点击查看大图](http://103.3.152.87:81/source/ico/dz_2.png)