在HTML中，点击图片弹出大图的效果可以通过使用JavaScript来实现。我们可以通过添加一个事件处理程序，在图片被点击时显示一个模态框，其中包含放大后的图片。
以下是一种实现方法：
1. 创建HTML结构：
```
×
```
2. 创建CSS样式（style.css）：
```
#modal {
display: none;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: *;
height: *;
background-color: rgba(0
0
0
0.7);
text-align: center;
}
#modal .close {
position: absolute;
top: 20px;
right: 20px;
color: #fff;
font-size: 30px;
cursor: pointer;
}
#modal-image {
max-width: 80%;
max-height: 80%;
margin-top: 10%;
}
#gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.thumbnail {
width: 200px;
height: 200px;
object-fit: cover;
margin: 10px;
cursor: pointer;
}
```
3. 创建JavaScript脚本（ｓｃｒｉｐｔ.js）：
```
document.addEventListener("DOMContentLoaded"
function() {
var modal = document.getElementById("modal");
var images = document.getElementsByClassName("thumbnail");
var modalImage = document.getElementById("modal-image");
var closeBtn = document.getElementsByClassName("close")[0];
for (var i = 0; i < images.length; i++) {
images[i].addEventListener("click"
function() {
var src = this.getAttribute("src");
modal.style.display = "block";
modalImage.setAttribute("src"
src);
});
}
closeBtn.addEventListener("click"
function() {
modal.style.display = "none";
});
window.addEventListener("click"
function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
});
});
```
上述代码中，首先我们定义了一个模态框（modal），用于显示大图。模态框会在图片被点击时显示出来，并在点击关闭按钮或点击模态框外部时隐藏起来。
在JavaScript脚本中，我们获取了缩略图***，并通过循环给每个缩略图添加了点击事件。点击缩略图时，我们获取了缩略图的src属性，并通过该属性设置了模态框中大图的src属性，从而显示了对应的大图。
同时，我们还**了关闭按钮和模态框外部的点击事件，以便在用户点击它们时隐藏模态框。
QQ客服