js灯箱

JavaScript灯箱（Lightbox）是一种网页设计技术，用于在用户点击或触摸时显示图片或内容，通常以全屏或放大形式展示，以吸引用户的注意力。以下是关于JavaScript灯箱的相关信息：

基本原理

JavaScript灯箱通过JavaScript和CSS实现，当用户点击图片时，会弹出一个包含图片的模态框，用户可以在其中浏览图片，而不会离开当前页面。这种效果可以通过监听图片的点击事件来触发，并动态改变模态框的显示状态。

优势

提升用户体验：通过放大图片并提供良好的视觉效果，增强用户的视觉体验。
增强互动性：用户可以通过简单的点击或触摸操作来互动，增加了网页的互动性。
减少页面干扰：在全屏模式下展示图片，可以减少其他页面元素的干扰，使用户更加专注于展示内容。

类型

图片灯箱：主要用于展示单张图片，用户可以点击图片放大查看。
画廊灯箱：可以展示多张图片，用户可以在不同的图片之间切换。

应用场景

广告展示：在商场、超市等场所的招牌、橱窗广告等。
展览展示：在各类展会、展览等活动中展示产品、技术、企业文化等。
网站内容：用于网站中的图片展示，提升用户体验。

示例代码

一个简单的JavaScript灯箱效果可以使用以下HTML和JavaScript代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LightBox Example</title>
    <style>
        .lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }
        .lightbox img {
            max-width: 90%;
            max-height: 90%;
        }
    </style>
</head>
<body>
    <img src="image1.jpg" alt="Image 1" data-lightbox="gallery">
    <img src="image2.jpg" alt="Image 2" data-lightbox="gallery">

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

    <script>
        var lightbox = document.getElementById('lightbox');
        var closeBtn = document.querySelector('.close-btn');
        var lightboxImg = document.getElementById('lightbox-img');

        var images = document.querySelectorAll('img[data-lightbox="gallery"]');
        images.forEach(img => {
            img.addEventListener('click', function() {
                lightbox.style.display = 'flex';
                lightboxImg.src = this.src;
                lightboxImg.alt = this.alt;
            });
        });

        closeBtn.addEventListener('click', function() {
            lightbox.style.display = 'none';
        });
    </script>
</body>
</html>