JavaScript implémente la fermeture d'image

Dans la conception de sites Web, les images sont l'un des éléments les plus courants. Lorsque les utilisateurs parcourent des pages Web, ils rencontrent parfois des situations dans lesquelles ils doivent fermer des images. À l'heure actuelle, nous pouvons utiliser JavaScript pour implémenter la fonction de fermeture des images. Cet article explique comment utiliser JavaScript pour implémenter la fonction de fermeture d'image.

1. Analyse des exigences

Après avoir inséré une image dans la page, il doit y avoir un moyen de fermer l'image afin que les utilisateurs puissent continuer à parcourir la page. En analysant les exigences, nous pouvons déterminer que les exigences suivantes sont requises pour mettre en œuvre cette fonction :

1. Cliquer sur une zone en dehors de l'image ou sur un bouton de fermeture peut fermer l'image
2. Afin de faciliter l'ajustement et la modification de cette fonction, le code doit être facile à comprendre et à maintenir ;
3. La vitesse d'exécution du code doit être rapide sans affecter l'expérience d'exploitation de l'utilisateur.

2. Idées de mise en œuvre

Sur la base de l'analyse de la demande ci-dessus, nous pouvons concevoir les idées de mise en œuvre suivantes :

1. Pour chaque image à afficher, enveloppez-la avec un div et ajoutez un fond noir translucide au div ;
Placez l'image dans le div et affichez-la au centre;
2. Ajoutez un événement de clic au div, si l'utilisateur clique sur une zone autre que l'image ou un bouton de fermeture, le div sera caché.

3. Étapes de mise en œuvre

Ajoutez un élément div au fichier HTML et placez l'image à afficher dans le div.

1. <div id="imgBox">
       <img src="yourImage.jpg">
   </div>

Définissez le style de cet élément div dans un fichier CSS.

2. #imgBox{
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       height: 100%;
       width: 100%;
       background-color: rgba(0,0,0,0.7);
       z-index: 9999;
   }
   
   #imgBox img{
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
       max-width: 90%;
       max-height: 90%;
   }

Écrivez du code dans un fichier JavaScript pour définir des événements de clic pour les éléments div.

3. var imgBox = document.getElementById('imgBox');
   imgBox.addEventListener('click',function(e){
       if(e.target === imgBox || e.target.nodeName === 'SPAN'){
           imgBox.style.display = 'none';
       }
   });

Dans le code ci-dessus, nous avons ajouté un événement click à l'élément div. Lorsque l'utilisateur clique sur l'élément div, le code déterminera si l'élément cible de l'événement click est l'élément div lui-même ou un bouton de fermeture (dans dans cet exemple, nous utilisons un élément span comme bouton de fermeture), si c'est le cas, l'élément div est masqué.

4. Code complet

Le code de base est le suivant :

<div id="imgBox">
    <img src="yourImage.jpg">
    <span>关闭</span>
</div>

#imgBox{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 9999;
}

#imgBox img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 90%;
    max-height: 90%;
}

#imgBox span{
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    cursor: pointer;
}

#imgBox span:hover{
    text-decoration: underline;
}

var imgBox = document.getElementById('imgBox');
imgBox.addEventListener('click',function(e){
    if(e.target === imgBox || e.target.nodeName === 'SPAN'){
        imgBox.style.display = 'none';
    }
});

5. Résumé

Grâce aux étapes ci-dessus, nous avons implémenté avec succès la fonction de fermeture de l'image à l'aide de JavaScript. Lorsque l'utilisateur clique sur une zone en dehors de l'image ou sur un bouton de fermeture, l'image disparaît de la page. La structure du code de la fonction est claire, facile à comprendre et à maintenir, et elle s'exécute très rapidement. L'utilisation de cette fonction peut améliorer l'expérience utilisateur et permettre aux utilisateurs de naviguer sur le Web plus facilement.

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!