Maison > Article > interface Web > Comment utiliser JavaScript pour obtenir un effet lightbox d’image ?

Comment utiliser JavaScript pour obtenir un effet lightbox d’image ?

WBOYoriginal: 2023-10-18 11:15:20672parcourir

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

Comment utiliser JavaScript pour obtenir un effet lightbox d'image ?

Avec le développement des médias sociaux et de la conception Web, l'effet lightbox d'image est devenu l'un des effets interactifs courants sur de nombreux sites Web. Image lightbox est un effet qui affiche une image agrandie au centre de l'écran en cliquant dessus. Cela améliore non seulement l'expérience utilisateur, mais affiche également mieux les détails de l'image. Dans cet article, nous apprendrons comment utiliser JavaScript pour implémenter un simple effet lightbox d'image.

Tout d'abord, nous avons besoin d'une page HTML pour afficher l'image. Vous trouverez ci-dessous une structure HTML de base.

<!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>

Dans le code ci-dessus, nous avons créé un conteneur contenant trois images et ajouté une classe de "lightbox" à chaque image. Nous créons également un div caché pour afficher l'image agrandie, avec l'identifiant "lightbox". Dans ce div, nous avons ajouté une image vide et un bouton de fermeture.

Ensuite, nous devons créer des styles CSS pour obtenir l'effet de la lightbox de l'image. Créez un fichier appelé style.css et ajoutez les styles suivants :

.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;
}

Dans les styles CSS ci-dessus, nous stylisons le conteneur et l'image afin qu'ils puissent être affichés dans une grille sur la page. Nous définissons également un style appelé « lightbox » qui permet d'ajuster la mise en page et la couleur d'arrière-plan lorsque l'image est agrandie. Enfin, nous définissons le style de l'image agrandie et le style du bouton de fermeture.

Maintenant, nous pouvons commencer à écrire du code JavaScript. Créez un fichier nommé script.js dans le même répertoire que le fichier HTML et ajoutez le code suivant :

// 获取所有的图片元素
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");
});

Dans le code JavaScript ci-dessus, nous récupérons d'abord tous les éléments de l'image avec la classe "lightbox" via la méthode getElementsByClassName. Ensuite, nous obtenons les éléments pour l'image zoomée et le bouton de fermeture. Ensuite, nous utilisons une boucle pour lier un événement de clic à chaque image. Lorsque l'utilisateur clique sur l'image, l'adresse source de l'image est définie sur l'adresse de l'image agrandie et le style caché de l'image agrandie est supprimé. Enfin, nous lions l'événement click du bouton de fermeture et ajoutons un style masqué pour agrandir l'image lorsque l'utilisateur clique sur le bouton de fermeture.

Maintenant, nous pouvons ouvrir le fichier HTML dans le navigateur, cliquer sur l'image et voir l'effet de l'image agrandie et affichée au centre de la page. Lorsque vous cliquez sur le bouton de fermeture, l'image agrandie sera masquée.

Ce qui précède est un exemple de code permettant d'utiliser JavaScript pour obtenir l'effet lightbox de l'image. Vous pouvez le modifier et l'étendre selon vos propres besoins pour créer des effets de lightbox d'image plus complexes et plus diversifiés. Je vous souhaite du succès pour y parvenir !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html 循环 class JS 事件

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser JavaScript pour obtenir un effet de commutation manuelle du carrousel d'images ?Article suivant：Comment utiliser JavaScript pour obtenir un effet de commutation manuelle du carrousel d'images ?

Articles Liés

Voir plus