js实现点击图片放大效果
实现点击图片后弹出一个遮罩层来放大显示图片的功能，可以使用简单的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）位于同一目录下或者正确地引用了文件路径。