点击图片放大预览的核心是监听点击事件、动态创建遮罩层和大图容器，并将原图src赋给大图显示；需控制z-index、绝对居中、支持点击/ESC关闭，以及键盘导航与缩放等增强体验。

点击图片放大预览，核心是监听点击事件、动态创建遮罩层和大图容器，并将原图的 src 赋给大图显示。关键在于控制层级（z-index）、居中定位、支持点击关闭，以及良好的用户体验（如按 Esc 关闭、点击遮罩关闭）。

基础实现：监听点击 + 动态插入 DOM

给图片加 click 事件，获取其 src，然后生成一个带遮罩（overlay）和居中大图（img）的结构，插入到 body 底部：

• 用 document.createElement 创建 div.overlay 和 img.preview-img
• 设置 overlay 的 position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999;
• 大图设为 display: block; margin: auto; max-width: 90vw; max-height: 90vh;，并用 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 居中
• 把大图插入 overlay，再把 overlay 插入 document.body

添加关闭功能：点击遮罩 / 按 Esc 键

用户需要便捷退出预览，不能只靠刷新页面：

OpenJDK 24

下载

• 给 overlay 绑定 click 事件，点击时移除自身（overlay.remove()）
• 监听 keydown 全局事件，判断 e.key === 'Escape'，触发关闭
• 注意：关闭前先解绑事件，避免内存泄漏（尤其多次打开关闭）

增强体验：支持键盘导航（← →）和缩放

如果页面有多个图片，可扩展为图集模式：

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

• 预览时记录当前图片在父容器中的索引（如 imgList.indexOf(img)）
• 按 ← 键取前一张（index--），→ 键取后一张（index++），更新大图 src 和 alt
• 简单缩放可用 CSS transform: scale(1.2) 配合过渡动画；更专业可用 scaleX/Y + transform-origin 控制中心点

注意事项与优化建议

避免常见坑，让效果更稳定：

• 图片加载中显示 loading 提示（如加 onload 和 onerror 处理）
• 移动端需加 touchstart 替代 click（防止 300ms 延迟），或用 addEventListener('click', ..., { passive: true })
• 不要直接修改原图样式（如加 cursor: pointer），建议统一加类名（如 js-preview-trigger）便于维护
• 若图片尺寸远大于视口，可限制最大宽高并启用 object-fit: contain 防止变形