点击小图弹出大图预览，核心是监听图片点击、获取原图地址、动态创建遮罩层和大图容器，并支持点击空白或按 Esc 关闭。

点击小图弹出大图预览，核心是监听图片点击、获取原图地址、动态创建遮罩层和大图容器，并支持点击空白或按 Esc 关闭。

1. 基础 HTML 结构

小图用普通 <img> 标签，建议加上 data-large 属性存放高清图 URL（若原图已足够大，也可直接用 src）：

<img src="thumb.jpg" data-large="full.jpg" alt="示例图" class="preview-img">
<img src="thumb2.jpg" data-large="full2.jpg" alt="示例图2" class="preview-img">

2. JavaScript 逻辑实现

监听所有带 .preview-img 类的图片，点击时插入一个全屏遮罩 + 居中大图：

说明：不依赖任何库，纯原生 JS，兼容主流浏览器。

• 点击时读取 data-large 值，创建 <img> 元素并设置 src
• 动态添加遮罩层（div.overlay）和图片容器（div.preview-container）到 body
• 图片加载完成后居中显示；加载失败时显示提示
• 绑定点击遮罩、按 Esc 键关闭预览

3. 简洁可用的 JS 代码

复制粘贴即可运行（建议放在 </body> 前）：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

立即学习“Java免费学习笔记（深入）”；

document.querySelectorAll('.preview-img').forEach(img => {
  img.addEventListener('click', () => {
    const largeSrc = img.dataset.large || img.src;
    const overlay = document.createElement('div');
    overlay.className = 'overlay';
    overlay.innerHTML = `
      <div class="preview-container">
        <img src="${largeSrc}" alt="大图预览" class="preview-img-full">
      </div>
    `;
    document.body.appendChild(overlay);

    const fullImg = overlay.querySelector('.preview-img-full');
    fullImg.onload = () => {
      overlay.style.display = 'flex';
      overlay.classList.add('show');
    };
    fullImg.onerror = () => {
      fullImg.alt = '图片加载失败';
      overlay.style.display = 'flex';
      overlay.classList.add('show');
    };

    // 点击遮罩关闭
    overlay.addEventListener('click', e => {
      if (e.target === overlay) overlay.remove();
    });

    // 按 Esc 关闭
    const closeOnEsc = e => { if (e.key === 'Escape') overlay.remove(); };
    document.addEventListener('keydown', closeOnEsc);
    overlay.addEventListener('remove', () => {
      document.removeEventListener('keydown', closeOnEsc);
    });
  });
});

4. 配套 CSS 样式（关键部分）

让遮罩全屏、居中、有背景蒙层，大图自适应又不失清晰：

.overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
}
.preview-container {
  max-width: 90vw;
  max-height: 90vh;
}
.preview-img-full {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 4px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

不复杂但容易忽略：确保大图 URL 可访问，移动端建议加 touch-action: manipulation 提升响应，如需缩放可进一步集成 pinch-zoom 逻辑。