html点击图片弹出大图

你可以使用 JavaScript 和 CSS 来实现这个效果。具体实现步骤如下：

1. 在 HTML 中，将小图像放在一个带有类名的 `<div>` 元素中，并为它们的 `src` 属性设置不同的文件路径。

<div class="gallery">
  <img src="small-image-1.jpg" alt="Small Image 1">
  <img src="small-image-2.jpg" alt="Small Image 2">
  <img src="small-image-3.jpg" alt="Small Image 3">
</div>

2. 在 CSS 中，将小图像的样式设置为 `float: left;`，以使它们排成一行。

.gallery img {
  float: left;
  margin-right: 10px;
}

3. 用 JavaScript 监听小图像的点击事件，并将大图像插入到 HTML 中。

// 获取所有小图像
const smallImages = document.querySelectorAll('.gallery img');

// 遍历每个小图像
smallImages.forEach(image => {
  // 监听小图像的点击事件
  image.addEventListener('click', () => {
    // 创建大图像元素
    const largeImage = document.createElement('img');

    // 设置大图像的文件路径
    largeImage.src = image.src.replace('small', 'large');

    // 将大图像插入到页面中
    document.body.appendChild(largeImage);
  });
});

4. 在 CSS 中，为大图像设置样式，以使它居中并显示在页面顶部。

img.large-image {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

这样，当用户点击小图像时，将会弹出一个居中显示的大图像。