JavaScript 实现图片灯箱效果的方法

在网页设计中，图片灯箱效果能够为用户带来出色的视觉体验，让图片展示更加生动和吸引人。下面就为大家详细介绍如何使用 JavaScript 实现图片灯箱效果。

搭建 HTML 结构。我们需要创建一个包含图片的容器，以及用于展示灯箱效果的遮罩层和图片展示框。例如：

<div class="image-container">
    <img src="image1.jpg" alt="图片 1">
    <img src="image2.jpg" alt="图片 2">
</div>
<div class="lightbox">
    <div class="lightbox-content">
        <img src="" alt="放大图片">
        <span class="close">&times;</span>
    </div>
</div>

接着，编写 CSS 样式，让页面布局和外观更美观。为图片添加合适的样式，设置遮罩层的背景颜色和透明度，以及灯箱内容框的样式，让其在页面中心展示。

.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
}
.lightbox-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
}

最后，关键的 JavaScript 部分。通过获取图片元素和灯箱相关元素，为图片添加点击事件监听器。当点击图片时，获取图片的源地址，将其设置到灯箱内的图片元素上，并显示灯箱。为关闭按钮添加点击事件，点击时隐藏灯箱。

const images = document.querySelectorAll('.image-container img');
const lightbox = document.querySelector('.lightbox');
const lightboxImg = document.querySelector('.lightbox-content img');
const closeBtn = document.querySelector('.close');

images.forEach((image) => {
    image.addEventListener('click', () => {
        lightboxImg.src = image.src;
        lightbox.style.display = 'block';
    });
});

closeBtn.addEventListener('click', () => {
    lightbox.style.display = 'none';
});

通过以上步骤，我们就利用 JavaScript 成功实现了图片灯箱效果。这种效果不仅增强了用户与图片的交互性，还提升了整个网站的视觉效果，为用户带来更好的浏览体验。无论是展示产品图片、艺术作品还是风景照片，图片灯箱效果都能让图片以更完美的方式呈现给用户。