Heim > Artikel > Web-Frontend > Wie verwende ich JavaScript, um einen Bild-Lightbox-Effekt zu erzielen?

Wie verwende ich JavaScript, um einen Bild-Lightbox-Effekt zu erzielen?

WBOYOriginal: 2023-10-18 11:15:20672Durchsuche

如何使用 JavaScript 实现图片灯箱效果？

Mit der Entwicklung von Social Media und Webdesign ist der Bild-Lightbox-Effekt zu einem der häufigsten interaktiven Effekte auf vielen Websites geworden. Image Lightbox ist ein Effekt, der durch Anklicken ein vergrößertes Bild in der Mitte des Bildschirms anzeigt. Es verbessert nicht nur das Benutzererlebnis, sondern zeigt auch die Details des Bildes besser an. In diesem Artikel erfahren Sie, wie Sie mit JavaScript einen einfachen Bild-Lightbox-Effekt implementieren.

Zuerst benötigen wir eine HTML-Seite, um das Bild anzuzeigen. Nachfolgend finden Sie eine grundlegende HTML-Struktur.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片灯箱</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <img src="image1.jpg" alt="Image 1" class="lightbox">
        <img src="image2.jpg" alt="Image 2" class="lightbox">
        <img src="image3.jpg" alt="Image 3" class="lightbox">
    </div>

    <div id="lightbox" class="hidden">
        <img src="" alt="Lightbox Image" id="lightbox-image">
        <span id="close-button">X</span>
    </div>

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

Im obigen Code haben wir einen Container mit drei Bildern erstellt und jedem Bild eine Klasse „Lightbox“ hinzugefügt. Wir erstellen außerdem ein verstecktes Div, um das vergrößerte Bild anzuzeigen, mit der ID „lightbox“. In diesem Div haben wir ein leeres Bild und eine Schaltfläche zum Schließen hinzugefügt.

Als nächstes müssen wir einige CSS-Stile erstellen, um den Effekt der Bild-Lightbox zu erzielen. Erstellen Sie eine Datei mit dem Namen style.css und fügen Sie die folgenden Stile hinzu:

.container {
    display: flex;
}

.lightbox {
    cursor: pointer;
    width: 200px;
    height: 200px;
}

#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;
    flex-direction: column;
    text-align: center;
    z-index: 9999;
}

#lightbox img {
    width: 80%;
    max-height: 80%;
    margin-bottom: 20px;
}

#close-button {
    color: #fff;
    font-size: 30px;
    cursor: pointer;
}

In den oben genannten CSS-Stilen formatieren wir den Container und das Bild so, dass sie in einem Raster auf der Seite angezeigt werden können. Wir definieren außerdem einen Stil namens „Lightbox“, der zum Anpassen des Layouts und der Hintergrundfarbe verwendet wird, wenn das Bild vergrößert wird. Abschließend legen wir den Stil für das vergrößerte Bild und den Stil für den Schließen-Button fest.

Jetzt können wir mit dem Schreiben von JavaScript-Code beginnen. Erstellen Sie eine Datei mit dem Namen script.js im selben Verzeichnis wie die HTML-Datei und fügen Sie den folgenden Code hinzu:

// 获取所有的图片元素
var lightboxImages = document.getElementsByClassName("lightbox");

// 获取放大图片和关闭按钮元素
var lightbox = document.getElementById("lightbox");
var lightboxImage = document.getElementById("lightbox-image");
var closeButton = document.getElementById("close-button");

// 绑定点击事件，显示放大图片
for (var i = 0; i < lightboxImages.length; i++) {
    lightboxImages[i].addEventListener("click", function() {
        var imageSource = this.getAttribute("src");
        lightboxImage.setAttribute("src", imageSource);
        lightbox.classList.remove("hidden");
    });
}

// 绑定点击事件，隐藏放大图片
closeButton.addEventListener("click", function() {
    lightbox.classList.add("hidden");
});

Im obigen JavaScript-Code erhalten wir zunächst alle Bildelemente mit der Klasse „lightbox“ über die Methode getElementsByClassName. Als nächstes erhalten wir die Elemente für das Zoombild und den Schließen-Button. Dann verwenden wir eine Schleife, um ein Klickereignis an jedes Bild zu binden. Wenn der Benutzer auf das Bild klickt, wird die Quelladresse des Bildes auf die Adresse des vergrößerten Bildes gesetzt und der verborgene Stil des vergrößerten Bildes entfernt. Schließlich binden wir das Klickereignis der Schaltfläche „Schließen“ und fügen einen versteckten Stil hinzu, um das Bild zu vergrößern, wenn der Benutzer auf die Schaltfläche „Schließen“ klickt.

Jetzt können wir die HTML-Datei im Browser öffnen, auf das Bild klicken und den Effekt sehen, wenn das Bild vergrößert und in der Mitte der Seite angezeigt wird. Wenn Sie auf die Schaltfläche „Schließen“ klicken, wird das vergrößerte Bild ausgeblendet.

Das Obige ist der Beispielcode für die Verwendung von JavaScript, um den Bild-Lightbox-Effekt zu erzielen. Sie können es entsprechend Ihren Anforderungen ändern und erweitern, um komplexere und vielfältigere Bild-Lightbox-Effekte zu erstellen. Ich wünsche Ihnen viel Erfolg dabei!

Das obige ist der detaillierte Inhalt vonWie verwende ich JavaScript, um einen Bild-Lightbox-Effekt zu erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html 循环 class JS 事件

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie verwende ich JavaScript, um einen manuellen Umschalteffekt des Bildkarussells zu erzielen?Nächster Artikel：Wie verwende ich JavaScript, um einen manuellen Umschalteffekt des Bildkarussells zu erzielen?

In Verbindung stehende Artikel

Mehr sehen