当前位置：首页 > JavaScript

js实现查看大图

2026-04-04 18:09:32JavaScript

实现查看大图功能

监听点击事件

为需要查看大图的元素添加点击事件监听器。通常是小图的缩略图或按钮。

document.querySelectorAll('.thumbnail').forEach(item => {
  item.addEventListener('click', function() {
    const src = this.getAttribute('data-large') || this.src;
    showLargeImage(src);
  });
});

创建大图容器

动态创建一个大图展示容器，并设置基本样式。

function createOverlay() {
  const overlay = document.createElement('div');
  overlay.className = 'image-overlay';
  overlay.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    cursor: zoom-out;
  `;
  document.body.appendChild(overlay);
  return overlay;
}

显示大图

在容器中显示点击的大图，并添加关闭功能。

function showLargeImage(src) {
  const overlay = createOverlay();
  const img = document.createElement('img');
  img.src = src;
  img.style.maxHeight = '90vh';
  img.style.maxWidth = '90vw';

  overlay.appendChild(img);

  overlay.addEventListener('click', function() {
    document.body.removeChild(overlay);
  });
}

添加键盘支持

增强用户体验，支持ESC键关闭大图。

document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    const overlay = document.querySelector('.image-overlay');
    if (overlay) {
      document.body.removeChild(overlay);
    }
  }
});

添加过渡动画

使大图显示更平滑，可以添加CSS过渡效果。

.image-overlay img {
  transition: transform 0.3s ease;
  transform: scale(0.8);
  opacity: 0;
}

.image-overlay img.loaded {
  transform: scale(1);
  opacity: 1;
}

img.onload = function() {
  img.classList.add('loaded');
};

响应式调整

确保大图在不同设备上显示正常。

function adjustImageSize(img) {
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;

  if (img.naturalWidth > windowWidth * 0.9 || img.naturalHeight > windowHeight * 0.9) {
    const ratio = Math.min(
      (windowWidth * 0.9) / img.naturalWidth,
      (windowHeight * 0.9) / img.naturalHeight
    );
    img.style.width = `${img.naturalWidth * ratio}px`;
  } else {
    img.style.width = 'auto';
  }
}

预加载大图

提升用户体验，可以先预加载大图资源。

js实现查看大图

function preloadLargeImages() {
  document.querySelectorAll('[data-large]').forEach(item => {
    const img = new Image();
    img.src = item.getAttribute('data-large');
  });
}

window.addEventListener('load', preloadLargeImages);

完整实现示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .thumbnail { width: 200px; cursor: zoom-in; }
    .image-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; cursor: zoom-out; }
    .image-overlay img { max-width: 90vw; max-height: 90vh; transition: all 0.3s ease; transform: scale(0.8); opacity: 0; }
    .image-overlay img.loaded { transform: scale(1); opacity: 1; }
  </style>
</head>
<body>
  <img class="thumbnail" src="small.jpg" data-large="large.jpg">

  <script>
    document.querySelectorAll('.thumbnail').forEach(item => {
      item.addEventListener('click', function() {
        const src = this.getAttribute('data-large') || this.src;
        showLargeImage(src);
      });
    });

    function showLargeImage(src) {
      const overlay = document.createElement('div');
      overlay.className = 'image-overlay';
      document.body.appendChild(overlay);

      const img = document.createElement('img');
      img.src = src;
      overlay.appendChild(img);

      img.onload = function() {
        img.classList.add('loaded');
      };

      overlay.addEventListener('click', function() {
        document.body.removeChild(overlay);
      });
    }

    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') {
        const overlay = document.querySelector('.image-overlay');
        if (overlay) document.body.removeChild(overlay);
      }
    });
  </script>
</body>
</html>