当前位置：首页 > JavaScript

js实现灯箱

2026-02-02 12:16:29JavaScript

实现灯箱效果的基本方法

灯箱效果通常用于放大显示图片或其他内容，同时覆盖整个页面背景。以下是使用纯JavaScript和CSS实现灯箱效果的步骤：

HTML结构

<div class="lightbox" id="lightbox">
  <div class="lightbox-content">
    <span class="close">&times;</span>
    <img src="" class="lightbox-image" id="lightbox-image">
  </div>
</div>

<!-- 触发灯箱的图片示例 -->
<img src="thumbnail.jpg" class="thumbnail" onclick="openLightbox(this)">

CSS样式

.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.lightbox-content {
  position: relative;
  margin: auto;
  padding: 20px;
  max-width: 90%;
  max-height: 90%;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  margin: 0 auto;
}

.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
}

JavaScript代码

function openLightbox(element) {
  const lightbox = document.getElementById('lightbox');
  const lightboxImg = document.getElementById('lightbox-image');

  lightbox.style.display = 'block';
  lightboxImg.src = element.src;

  document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
      closeLightbox();
    }
  });
}

function closeLightbox() {
  document.getElementById('lightbox').style.display = 'none';
}

// 绑定关闭按钮事件
document.querySelector('.close').addEventListener('click', closeLightbox);

增强功能实现

支持图片切换

const images = document.querySelectorAll('.thumbnail');
let currentIndex = 0;

function openLightbox(index) {
  const lightbox = document.getElementById('lightbox');
  const lightboxImg = document.getElementById('lightbox-image');

  currentIndex = index;
  lightbox.style.display = 'block';
  lightboxImg.src = images[index].src;

  // 添加键盘导航
  document.addEventListener('keydown', handleKeyDown);
}

function handleKeyDown(event) {
  if (event.key === 'Escape') {
    closeLightbox();
  } else if (event.key === 'ArrowRight') {
    navigate(1);
  } else if (event.key === 'ArrowLeft') {
    navigate(-1);
  }
}

function navigate(direction) {
  currentIndex = (currentIndex + direction + images.length) % images.length;
  document.getElementById('lightbox-image').src = images[currentIndex].src;
}

// 为所有图片添加点击事件
images.forEach((img, index) => {
  img.addEventListener('click', () => openLightbox(index));
});

动画效果优化

添加淡入淡出动画效果：

.lightbox {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

更新JavaScript：

function openLightbox(index) {
  const lightbox = document.getElementById('lightbox');
  lightbox.classList.add('active');
  // 其余代码...
}

function closeLightbox() {
  const lightbox = document.getElementById('lightbox');
  lightbox.classList.remove('active');
  // 可选：延迟隐藏元素以完成动画
  setTimeout(() => {
    lightbox.style.display = 'none';
  }, 300);
}

响应式设计考虑

确保灯箱在不同设备上表现良好：

@media (max-width: 768px) {
  .lightbox-content {
    max-width: 95%;
    padding: 10px;
  }

  .lightbox-image {
    max-height: 70vh;
  }

  .close {
    font-size: 28px;
    right: 15px;
  }
}

无障碍访问改进

添加ARIA属性提升可访问性：

<div class="lightbox" id="lightbox" role="dialog" aria-hidden="true" aria-labelledby="lightbox-title">
  <div class="lightbox-content">
    <span class="close" role="button" aria-label="Close lightbox">&times;</span>
    <img src="" class="lightbox-image" id="lightbox-image" alt="Enlarged view">
  </div>
</div>

更新JavaScript：

function openLightbox(index) {
  const lightbox = document.getElementById('lightbox');
  lightbox.setAttribute('aria-hidden', 'false');
  // 其余代码...
}

function closeLightbox() {
  const lightbox = document.getElementById('lightbox');
  lightbox.setAttribute('aria-hidden', 'true');
  // 其余代码...
}

js实现灯箱