灯箱效果js

灯箱效果（Lightbox Effect）是一种网页设计技术，用于在当前页面上显示一个覆盖层，通常包含图片、视频或其他媒体内容，并且通常带有一定的透明背景，以突出显示内容并允许用户在不需要离开当前页面的情况下查看详细信息。

基础概念

灯箱效果通常涉及以下几个关键点：

覆盖层（Overlay）：一个半透明的背景层，用于遮盖页面的其他部分。
内容容器（Content Container）：在覆盖层上显示的实际内容，如图片、视频等。
触发元素（Trigger Element）：用户点击或交互以显示灯箱内容的元素。
关闭按钮（Close Button）：允许用户关闭灯箱并返回到页面原始状态的按钮。

优势

用户体验：用户无需离开当前页面即可查看详细内容。
简洁性：保持页面布局整洁，避免打开新窗口或弹出层。
易于实现：可以使用简单的HTML、CSS和JavaScript实现。

类型

图片灯箱：仅显示图片。
多媒体灯箱：可以显示图片、视频等多种媒体类型。
自定义内容灯箱：可以显示任何HTML内容。

应用场景

产品展示：在电商网站中展示产品详情。
画廊浏览：艺术作品或摄影作品的在线展览。
新闻详情：点击新闻标题后显示完整文章。

示例代码

以下是一个简单的图片灯箱效果的实现示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lightbox Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="gallery">
        <img src="thumbnail1.jpg" alt="Image 1" class="lightbox-trigger">
        <img src="thumbnail2.jpg" alt="Image 2" class="lightbox-trigger">
    </div>

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

    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    font-family: Arial, sans-serif;
}

.gallery img {
    width: 100px;
    height: 100px;
    margin: 10px;
    cursor: pointer;
}

.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    color: white;
    font-size: 30px;
    cursor: pointer;
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const lightboxTriggers = document.querySelectorAll('.lightbox-trigger');
    const lightbox = document.getElementById('lightbox');
    const lightboxImg = document.getElementById('lightbox-img');
    const closeBtn = document.querySelector('.close-btn');

    lightboxTriggers.forEach(trigger => {
        trigger.addEventListener('click', function() {
            lightboxImg.src = this.src.replace('thumbnail', 'fullsize');
            lightbox.style.display = 'flex';
        });
    });

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

    lightbox.addEventListener('click', function(event) {
        if (event.target === lightbox) {
            lightbox.style.display = 'none';
        }
    });
});