js实现查看大图

使用原生JavaScript实现查看大图功能

通过监听图片点击事件，动态创建遮罩层和大图容器，实现点击查看大图效果。

// 获取所有需要查看大图的图片元素
const images = document.querySelectorAll('.thumbnail');

images.forEach(img => {
  img.addEventListener('click', function() {
    // 创建遮罩层
    const overlay = document.createElement('div');
    overlay.style.position = 'fixed';
    overlay.style.top = '0';
    overlay.style.left = '0';
    overlay.style.width = '100%';
    overlay.style.height = '100%';
    overlay.style.backgroundColor = 'rgba(0,0,0,0.8)';
    overlay.style.zIndex = '1000';
    overlay.style.display = 'flex';
    overlay.style.justifyContent = 'center';
    overlay.style.alignItems = 'center';

    // 创建大图容器
    const largeImg = document.createElement('img');
    largeImg.src = this.src;
    largeImg.style.maxWidth = '90%';
    largeImg.style.maxHeight = '90%';
    largeImg.style.objectFit = 'contain';

    // 点击遮罩层关闭大图
    overlay.addEventListener('click', function() {
      document.body.removeChild(overlay);
    });

    overlay.appendChild(largeImg);
    document.body.appendChild(overlay);
  });
});

使用CSS过渡动画增强体验

为大图的显示和隐藏添加平滑的过渡效果，提升用户体验。

/* CSS部分 */
.large-image-container {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.large-image-container.show {
  opacity: 1;
}

// JavaScript部分
// 在创建大图容器后添加
setTimeout(() => {
  overlay.classList.add('show');
}, 10);

// 关闭时先移除show类
overlay.addEventListener('click', function() {
  overlay.classList.remove('show');
  setTimeout(() => {
    document.body.removeChild(overlay);
  }, 300);
});

支持键盘操作和手势缩放

添加键盘ESC关闭功能，并支持触摸设备的手势缩放。

// 添加键盘事件监听
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape' && document.querySelector('.overlay')) {
    const overlay = document.querySelector('.overlay');
    overlay.classList.remove('show');
    setTimeout(() => {
      document.body.removeChild(overlay);
    }, 300);
  }
});

// 添加触摸手势支持
let initialDistance = null;

overlay.addEventListener('touchstart', function(e) {
  if (e.touches.length === 2) {
    initialDistance = Math.hypot(
      e.touches[0].clientX - e.touches[1].clientX,
      e.touches[0].clientY - e.touches[1].clientY
    );
  }
});

overlay.addEventListener('touchmove', function(e) {
  if (e.touches.length === 2 && largeImg) {
    const currentDistance = Math.hypot(
      e.touches[0].clientX - e.touches[1].clientX,
      e.touches[0].clientY - e.touches[1].clientY
    );

    if (initialDistance) {
      const scale = currentDistance / initialDistance;
      largeImg.style.transform = `scale(${scale})`;
    }
  }
});

overlay.addEventListener('touchend', function() {
  initialDistance = null;
  if (largeImg) {
    largeImg.style.transform = 'scale(1)';
  }
});

预加载大图优化性能

在鼠标悬停时预加载大图，减少点击后的等待时间。

images.forEach(img => {
  // 预加载大图
  const largeImage = new Image();
  largeImage.src = img.dataset.largeSrc || img.src;

  img.addEventListener('mouseenter', function() {
    largeImage.src = this.dataset.largeSrc || this.src;
  });

  img.addEventListener('click', function() {
    // 使用预加载的图片
    if (largeImage.complete) {
      largeImg.src = largeImage.src;
    } else {
      largeImage.onload = function() {
        largeImg.src = largeImage.src;
      };
    }
  });
});

响应式设计适配不同设备

根据设备屏幕尺寸调整大图显示方式。

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

  if (largeImg) {
    if (windowWidth < 768) {
      largeImg.style.maxWidth = '95%';
      largeImg.style.maxHeight = '95%';
    } else {
      largeImg.style.maxWidth = '80%';
      largeImg.style.maxHeight = '80%';
    }
  }
}

window.addEventListener('resize', adjustImageSize);

// 在创建大图时调用
adjustImageSize();