实现点击图片后弹出一个遮罩层来放大显示图片的功能，可以使用简单的HTML和JavaScript来完成：
- HTML结构 - 包含图片和一个用于弹出的遮罩层。
- CSS样式 - 设置遮罩层和放大的图片样式。
- JavaScript逻辑 - 处理点击事件和遮罩层的显示与隐藏。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Zoom</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<img src="path/to/your/image.jpg" alt="Sample Image" id="image">
</div>
<!-- 遮罩层 -->
<div class="overlay" id="overlay">
<img src="" alt="Zoomed Image" id="zoomedImage">
</div>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css)
.container {
text-align: center;
}
img {
max-width: 100%;
cursor: pointer;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: none;
align-items: center;
justify-content: center;
}
#zoomedImage {
max-width: 80%;
max-height: 80%;
}
JavaScript (script.js)
document.getElementById('image').addEventListener('click', function() {
var overlay = document.getElementById('overlay');
var zoomedImage = document.getElementById('zoomedImage');
// 显示遮罩层
overlay.style.display = 'flex';
// 设置放大图片的源
zoomedImage.src = this.src;
});
// 当点击遮罩层时关闭它
document.getElementById('overlay').addEventListener('click', function() {
this.style.display = 'none';
});
这段代码会创建一个包含一张图片的页面。当你点击这张图片时，会弹出一个遮罩层，里面显示放大的图片。再次点击遮罩层则会关闭遮罩层。
确保你将图片的路径替换为实际的图片文件路径，并且所有文件（HTML、CSS、JS）位于同一目录下或者正确地引用了文件路径。
标签：遮罩,overlay,js,点击,HTML,图片,zoomedImage,放大 From： https://blog.csdn.net/svygh123/article/details/141405419