在上一篇文章中，讲到了单张图片，如何实现点击放大查看，很多读者询问了关于如何在多张图片中实现相同的效果，
多张图片需要注意的是，不能给每张图片添加相同的id，因为id是唯一的，所以可以用类名代替
，并为每张图片添加事件监听器。
效果展示
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/7115a5c684e54c06b8e328fdb22ff4e5.gif
一、HTML 代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>多张图片点击放大查看</title><linkrel="stylesheet"href="index.css"></head><body><imgclass="zoomable"src="https://tse2-mm.cn.bing.net/th/id/OIF-C.pCiToCj12cyN1rDRkcEfkQ?w=260&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"alt="Image 1"><imgclass="zoomable"src="https://tse4-mm.cn.bing.net/th/id/OIP-C.HYdftIoR4dSWe_ePzYColwHaEo?w=272&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"alt="Image 2"><imgclass="zoomable"src="https://tse3-mm.cn.bing.net/th/id/OIP-C.I6v11MNVmk8eBo5WFEB0WwHaEK?w=299&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"alt="Image 3"><!-- 模态框：放大查看后图片的位置 --><divid="modal"class="modal"><spanclass="close">×</span><imgclass="modal-content"id="modalImage"></div><scriptsrc="index.js"></script></body></html>
二、CSS 代码
.zoomable{width: 100%;max-width: 300px;cursor: pointer;}/* 模态框 */.modal{display: none;position: fixed;/* 确保层级在上 */z-index: 1;padding-top: 100px;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color:rgba(0, 0, 0, 0.2);}.modal-content{margin: auto;display: block;width: 80%;max-width: 700px;}.modal-content{-webkit-animation-name: zoom;-webkit-animation-duration: 0.6s;animation-name: zoom;animation-duration: 0.6s;}@-webkit-keyframes zoom{from{-webkit-transform:scale(0)}to{-webkit-transform:scale(1)}}@keyframes zoom{from{transform:scale(0)}to{transform:scale(1)}}/* 关闭按钮 */.close{position: absolute;top: 15px;right: 35px;color: #f1f1f1;font-size: 40px;font-weight: bold;transition: 0.3s;}.close:hover,
.close:focus{color: #bbb;text-decoration: none;cursor: pointer;}
三、JS 代码
var modal = document.getElementById("modal");var modalImg = document.getElementById("modalImage");var images = document.querySelectorAll(".zoomable");// 遍历为每个图片元素添加事件监听器
images.forEach(function(image){
image.addEventListener("click",function(){
modal.style.display ="block";
modalImg.src =this.src;});});var span = document.querySelector(".close");
span.addEventListener("click",function(){
modal.style.display ="none";});
modal.addEventListener("click",function(event){if(event.target == modal){
modal.style.display ="none";}});
这样就可以实现在有多张图片的情况下，也能正常实现放大查看并关闭
本文转载自: https://blog.csdn.net/2301_79858914/article/details/139591652
版权归原作者 OEC小胖胖 所有， 如有侵权，请联系我们删除。
版权归原作者 OEC小胖胖 所有， 如有侵权，请联系我们删除。