← 全部文章

指南

图片悬停放大和快速下载规则

17 5月 2026 · 作者 JustZix Team

图片是掌控媒体的另一半。本指南汇集了三条用于处理图片的 JustZix 规则:悬停时放大、立即加载让任何图片都不留空白,以及一个尊重同源规则的快速下载按钮。

仅用 CSS 实现悬停放大

最简单的增强完全不需要 JavaScript。一个 CSS 变换在你悬停图片时把它放大,这足以看清细节而不用打开灯箱。

img {
  transition: transform .18s ease;
}

img:hover {
  transform: scale(1.6);
  position: relative;
  z-index: 2147483647;
}

用 transform 缩放能让布局保持稳定,因为图片仍占据它原来的盒子。悬停时高 z-index 意味着放大的图片浮在相邻内容之上,而不是被裁剪。

用 JavaScript 实现精确的放大镜

对于细节丰富的图片,一个跟随光标的放大镜胜过平面缩放。这条规则追踪指针,并把图片的变换原点移到光标下方的那个点。

(function () {
  document.addEventListener('pointermove', function (e) {
    var img = e.target;
    if (!img || img.tagName !== 'IMG') { return; }
    var r = img.getBoundingClientRect();
    var x = ((e.clientX - r.left) / r.width) * 100;
    var y = ((e.clientY - r.top) / r.height) * 100;
    img.style.transformOrigin = x + '% ' + y + '%';
  }, true);
  document.addEventListener('pointerenter', function (e) {
    if (e.target && e.target.tagName === 'IMG') {
      e.target.style.transform = 'scale(2.4)';
      e.target.style.transition = 'transform .12s';
    }
  }, true);
  document.addEventListener('pointerleave', function (e) {
    if (e.target && e.target.tagName === 'IMG') {
      e.target.style.transform = '';
    }
  }, true);
})();

放大镜朝着光标所在的任何位置缩放,所以在一张大图上平移感觉很自然。在 pointerleave 时重置 transform 把图片恢复到正常大小。

强制每张图片加载

懒加载对带宽有好处,但当你想阅读或保存整个相册而其中一半还是空白时就很烦人。这条规则把懒加载图片翻成立即加载,并推动慢速的图片去加载。

document.querySelectorAll('img[loading="lazy"]').forEach(function (img) {
  img.loading = 'eager';
  if (img.dataset.src && !img.src) {
    img.src = img.dataset.src;
  }
  if (img.dataset.srcset && !img.srcset) {
    img.srcset = img.dataset.srcset;
  }
});

许多网站把真正的 URL 藏在 data-src 属性里,只在图片滚动进视野时才把它复制到 src。你自己复制它会立即强制加载。同样的思路对 srcset 也有效。

一键下载按钮

这条规则在你悬停每张图片时给它的角落添加一个小的下载按钮。它使用锚点上标准的 download 属性,该属性要求浏览器保存文件。

(function () {
  document.addEventListener('pointerenter', function (e) {
    var img = e.target;
    if (!img || img.tagName !== 'IMG' || img._dl) { return; }
    img._dl = true;
    var a = document.createElement('a');
    a.textContent = 'Save';
    a.href = img.currentSrc || img.src;
    a.download = '';
    a.style.cssText = 'position:absolute;z-index:2147483647;'
      + 'background:#111;color:#fff;font:600 11px sans-serif;'
      + 'padding:3px 7px;border-radius:5px;text-decoration:none';
    var r = img.getBoundingClientRect();
    a.style.left = (r.left + window.scrollX + 4) + 'px';
    a.style.top = (r.top + window.scrollY + 4) + 'px';
    document.body.appendChild(a);
    img.addEventListener('pointerleave', function () {
      a.remove();
      img._dl = false;
    }, { once: true });
  }, true);
})();

download 属性对同源图片干净地有效。对于跨源图片,浏览器可能改为在新标签页打开文件而非保存它,这是预期行为,不是规则应该试图击败的东西。使用 currentSrc 会挑选浏览器实际从响应式 srcset 中选定的分辨率。

组合起来

• 在站点范围运行悬停放大 CSS;它开销低且无害。
• 把 JavaScript 放大镜留给图片密集的网站,例如相册或文档。
• 把立即加载规则与下载按钮组合,这样图片在你保存前已完全加载。

这三条都在我们的现成示例里可用,或者下载 JustZix 构建你自己的。对于媒体控制的视频那一面,从为每个视频强制原生控件开始。