点击图片放大功能可通过原生JS实现：为图片添加js-zoomable类，监听页面点击动态创建fixed遮罩层与大图，支持Esc/点击空白关闭，CSS控制居中、过渡与响应式尺寸，无需第三方库。
用原生 JavaScript 实现点击图片放大（无第三方库）
直接在 index.html 里加几行 JS 就能实现，不需要引入 Lightbox 或其他库。核心是监听图片点击、动态创建遮罩层和大图容器，并用 CSS 控制显示逻辑。
关键点在于：避免页面滚动被锁死时仍可滚动、点击空白或按 Esc 要关闭、大图居中且可缩放（但默认不启用拖拽）。
- 给所有想放大的
<img alt="index.html如何实现点击图片放大？" >加一个统一 class，比如js-zoomable - 在
底部插入一段内联<script></script>，不要放在里（否则 DOM 没加载完会找不到元素） - 大图地址直接复用原图的
src，不额外请求；如果原图是缩略图，确保其src指向高清版本（否则放大后模糊）
必须设置的 CSS 样式（否则遮罩不生效）
只靠 JS 不行，CSS 控制层级、过渡和居中。把下面这段贴进 <style></style> 或外部 CSS 文件：
body.zoom-active {
overflow: hidden;
}
.zoom-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.85);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 0;
transition: opacity 0.2s;
}
.zoom-overlay.active {
opacity: 1;
}
.zoom-img {
max-width: 90vw;
max-height: 90vh;
box-shadow: 0 0 30px rgba(0,0,0,0.5);
border-radius: 4px;
}
注意：.zoom-overlay 必须用 position: fixed，否则滚动时位置错乱；max-width/max-height 用 vw/vh 是为了响应式适配，别写死成像素值。
立即学习“前端免费学习笔记（深入）”；
常见错误：点击没反应 or 放大后一片黑
90% 是路径或选择器问题。检查以下几点：
-
document.querySelectorAll('.js-zoomable')返回空数组？确认图片确实有这个 class，且脚本执行时 DOM 已就绪（建议用DOMContentLoaded包裹） - 图片
src是相对路径（如./images/photo.jpg），但当前 HTML 在子目录下打开，导致 404 —— 浏览器控制台会报Failed to load resource，点开就能看到具体 URL 错在哪 - CSS 中漏写了
.zoom-overlay.active，或者拼错了 class 名（比如写成.zoom-overlay-active） - 图片本身宽高为 0（例如被父容器
display: none挡住），JS 读到的offsetWidth是 0，但这个不影响放大逻辑，只影响初始定位
Esc 关闭和点击遮罩关闭的 JS 实现
这部分逻辑容易被忽略，但用户实际体验很关键：
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && document.body.classList.contains('zoom-active')) {
closeZoom();
}
});
document.querySelector('.zoom-overlay')?.addEventListener('click', (e) => {
if (e.target === document.querySelector('.zoom-overlay')) {
closeZoom();
}
});
注意：不能监听整个 document 的 click 来关，否则点大图内部也会触发关闭；必须限定为点击遮罩层本体（即 e.target 等于遮罩节点）才关闭。另外，closeZoom() 函数里记得移除 zoom-active class 并清空遮罩内的 <img alt="index.html如何实现点击图片放大？" > src，防止内存泄漏。
移动端双击缩放、手势拖拽这些属于进阶需求，原生方案不做也合理——真要支持，得上 touchstart/touchmove 和 transform，复杂度陡增，而且多数项目只需要基础点击放大。
