← 全部文章

教程

鼠标悬停放大图片 —— 一个无需库的灯箱

15 5月 2026 · 作者 JustZix Team

画廊、商店、图库 —— 到处都是缩略图。要看一张完整的图，你得点击、等待、再返回。这条规则加上一个悬停预览：你把鼠标悬停在缩略图上，一个更大的版本出现在光标旁边。一个无需任何库的轻量灯箱。

规则

规则的 JavaScript —— 用你常逛的画廊的 URL 模式，或全局 *：

const box = document.createElement('img');
box.style.cssText =
  'position:fixed;pointer-events:none;z-index:99999;max-width:40vw;' +
  'max-height:80vh;box-shadow:0 8px 32px rgba(0,0,0,.4);' +
  'border-radius:8px;display:none';
document.body.appendChild(box);
addEventListener('mouseover', (e) => {
  const img = e.target.closest('img');
  if (!img) return;
  box.src = img.currentSrc || img.src;
  box.style.display = 'block';
});
addEventListener('mousemove', (e) => {
  box.style.left = (e.clientX + 24) + 'px';
  box.style.top = (e.clientY + 24) + 'px';
});
addEventListener('mouseout', () => { box.style.display = 'none'; });

它如何工作

只有一个预览元素

我们只创建一个 <img> 并复用它，只是换它的 src。没有 DOM 清理，没有泄漏。

pointer-events: none

预览盖在页面之上。没有 pointer-events: none 它会自己捕获鼠标事件 —— 光标会「进入」预览，mouseout 错误触发，预览会闪烁。有了这条规则预览对鼠标是透明的。

currentSrc 对 src

img.currentSrc 是浏览器实际从 srcset 里选出的版本 —— 通常比 src 更清晰。我们优先用它，用 src 作为后备。

position: fixed 加 client 坐标

position: fixed 相对于窗口定位预览，而 e.clientX/clientY 是光标相对于窗口的位置 —— 两者吻合，所以预览跟随光标，无论滚动到哪里。

一个变体 —— 完整尺寸而非缩略图

在许多画廊里缩略图有像 .../thumb/foto.jpg 这样的 URL，而完整尺寸是 .../large/foto.jpg。把 box.src 换成改写后的地址：

box.src = (img.currentSrc || img.src).replace('/thumb/', '/large/');

模式因网站而异 —— 看一张缩略图和一张完整图的 src，找出差别。

坑

• CSS 背景不是图片。作为 background-image 插入的照片不是 <img> 元素 —— 这条规则不会捕获它们。
• 懒加载。一个带 loading="lazy" 而你还没滚动到的缩略图可能根本没有 src。一旦可见，它就正常工作。
• 微小的图标。规则捕获每个 <img>，包括 UI 图标。要只针对画廊，收窄选择器，例如 e.target.closest('.gallery img')。

另见

• 示例 —— 缩放代码片段和其他开箱即用的代码
• 自动翻页 —— 另一条「加上缺失功能」的规则
• 标签页里的迷你 IDE —— 在哪里测试像这样的规则

安装 JustZix —— 看照片不用一张张点。