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é.

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>

   Copier après la connexion

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

#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%;
}

Copier après la connexion

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

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

Copier après la connexion

Copier après la connexion

<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';
    }
});

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!