HTML实现图片查看与隐藏

你好呀，我是小邹。

在网页设计中，提供一个直观且用户友好的图片查看功能是提升用户体验的重要一环。本文将详细介绍如何使用 HTML、CSS 和 JavaScript 来实现图片的查看与隐藏功能。通过本教程，你将学会如何让页面上的图片在点击时放大显示，以及如何通过再次点击或点击背景来关闭放大的图片。

HTML 结构

首先，我们需要在 HTML 文件中定义图片元素以及用于显示放大的图片的 lightbox 区域。以下是基本的 HTML 结构：

div class="gallery">
    img src="path/to/image1.jpg" alt="Image 1">
    img src="path/to/image2.jpg" alt="Image 2">
    
div>


div id="lightbox" style="display:none;">
    img id="lightboxImg">
div>

这里的 .gallery 类包含多个 元素，这些元素将在点击时触发 lightbox 的显示。

CSS 样式

接下来，我们为 lightbox 添加 CSS 样式，使其在屏幕上居中显示，并设置适当的透明度和尺寸限制：

#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#lightbox img {
    max-width: 90%;
    max-height: 90%;
}

这里的关键点是使用 position: fixed; 来确保 lightbox 始终覆盖整个屏幕，而 display: flex; 和justify-content: center;及 align-items: center; 则确保图片在 lightbox 中居中显示。

JavaScript 逻辑

最后，我们使用 JavaScript 来处理图片的点击事件，以及 lightbox 的显示和隐藏：

document.addEventListener('DOMContentLoaded', function () {
    var images = document.querySelectorAll('img');
    var lightbox = document.getElementById('lightbox');
    var lightboxImg = document.getElementById('lightboxImg');

    
    images.forEach(function (image) {
        image.addEventListener('click', function (event) {
            
            event.stopPropagation();
            
            lightboxImg.src = this.src;
            lightbox.style.display = 'flex';
        });
    });

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

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

这段代码首先监听 DOM 加载完成事件，然后获取所有图片元素和 lightbox 元素。接着，它为每张图片添加一个点击事件处理器，该处理器会更新 lightbox 中的图片并显示 lightbox。同时，它还为 lightbox 和 lightbox 中的图片添加了点击事件处理器，以允许用户通过点击来关闭 lightbox。

通过以上步骤，你可以实现一个简单但功能完整的图片查看与隐藏功能。这不仅提升了网站的交互性，也为用户提供了一个更加愉悦的浏览体验。

效果图