JQuery - 实现点击图片放大预览效果，预览时自动显示黑色遮罩层并且点击时关闭图片预览（详细示例一键复制运行）
warning:
这篇文章距离上次修改已过189天，其中的内容可能已经有所变动。
以下是一个使用jQuery实现点击图片放大预览，并且显示黑色遮罩层的简单示例。预览时遮罩层不可点击，点击任何位置遮罩层和预览图片都会关闭。
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片放大预览</title>
<style>
.mask {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.preview {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1001;
border: solid 5px #fff;
box-shadow: 0 0 15px #000;
cursor: pointer;
}
img.large {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<img class="small" src="path_to_your_small_image.jpg" alt="小图片">
<div class="mask"></div>
<div class="preview">
<img class="large" src="path_to_your_large_image.jpg" alt="大图片">
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.small').on('click', function() {
$('.mask, .preview').show();
});
$('.mask, .preview').on('click', function() {
$('.mask, .preview').hide();
});
$('.preview').on('click', function(event) {
event.stopPropagation();
});
});
</script>
</body>
</html>在这个示例中，.small 类代表小图片，点击小图片后会触发事件显示遮罩层 .mask 和预览图 .preview。遮罩层和预览图片都会监听点击事件，点击时隐藏自己。预览图片的点击事件通过 event.stopPropagation() 阻止冒泡到遮罩层，从而使遮罩层不会响应点击事件。
评论已关闭