"; 3. Utilisez la méthode "function showBgImg(e) {...}" pour obtenir l'effet de cliquer sur l'image pour l'agrandir."/> "; 3. Utilisez la méthode "function showBgImg(e) {...}" pour obtenir l'effet de cliquer sur l'image pour l'agrandir.">
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Comment obtenir une image en cliquant pour l'agrandir en utilisant du CSS pur

Comment obtenir une image en cliquant pour l'agrandir en utilisant du CSS pur

藏色散人
藏色散人original
2023-01-28 14:40:042326parcourir

Méthode pour réaliser une image en cliquant pour l'agrandir avec du CSS pur : 1. Créez un exemple de fichier HTML ; 2. Définissez "

Comment obtenir une image en cliquant pour l'agrandir en utilisant du CSS pur
"; 3. Utilisez la méthode "function showBgImg(e) {...}" pour obtenir l'effet de clic. sur l'image pour l'agrandir.

Comment obtenir une image en cliquant pour l'agrandir en utilisant du CSS pur

L'environnement d'exploitation de ce tutoriel : système Windows 10, version HTML5&&CSS3, ordinateur DELL G3

Comment utiliser le CSS pur pour cliquer sur l'image pour l'agrandir ?

Cliquez pour agrandir l'image de la formation réelle en CSS

I. Contexte

C'est une fonction très courante. Généralement, les vignettes sont affichées sur les sites Web. Après avoir cliqué sur la vignette, elle s'affichera dans une fenêtre contextuelle. -up box. Image agrandie

Alors, comment cette fonction est-elle implémentée ? Je viens d'apprendre les bases du CSS, et maintenant je peux le faire en pratique

1 Idée

Divisez d'abord la structure de la page :

  • Là. est une fenêtre pop-up qui affiche une grande image dans la fenêtre pop-up ; et la fenêtre pop-up est masquée par défaut
  • Vous pouvez placer de nombreuses images sur la page principale et ajouter des événements de clic
  • Après avoir cliqué, la pop-up -up window affiche et affiche la grande image
  • Grande Après avoir cliqué sur l'image ci-dessous, fermez la fenêtre pop-up

II Implémentation

Selon la description ci-dessus, nous implémentons d'abord une version de base, écrivons d'abord du HTML

. 
<body>

<!-- 先来实现弹窗 -->
<div class=&#39;modal&#39; id=&#39;modal&#39;>
    <img  id=&#39;bgImg&#39; / alt="Comment obtenir une image en cliquant pour l'agrandir en utilisant du CSS pur" >
</div>


<!-- 下面则是主页内容，先只给几个图片 -->

<div>
    <img class=&#39;thum-img&#39; 
    src=&#39;http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg&#39; />
</div>

</body>

puis ajoutez le style correspondant, exigeant que le modal soit masqué par défaut, donc comme suit (afin de mieux distinguer la fenêtre pop-up, la couleur de fond et la bordure sont ajoutées) 

<style>
.modal {
    display: none;
    margin: auto;
    width: 80%;
    height: 80%;
    background-color: rgb(0, 0, 0, 0.89);
    z-index: 1;
    border: 1px solid rgb(255,255,255,1);
}

.modal>img {
    display: block;
    margin: auto;
    padding: 10%;
    max-width: 60%;
    max-height: 60%;
}

.thum-img {
    width: 200px;
    height: 200px;
    margin: auto;
    display: block;
    padding: 40px;
}

</style>

Le suivant L'étape consiste à cliquer sur la logique d'affichage de la grande image, qui est implémentée à l'aide de js, 

<script>
    var modal = document.getElementById(&#39;modal&#39;);
    var bgImg = document.getElementById(&#39;bgImg&#39;);
    var thumImg = document.getElementById(&#39;thumImg&#39;);
    thumImg.onclick = function() {
        modal.style.display = &#39;block&#39;;
        bgImg.src = this.src;
    }

    bgImg.onclick = function() {
        modal.style.display = &#39;none&#39;;
    }
</script>

Ajoutez l'implémentation ci-dessus, après l'avoir assemblée en html, testez et visualisez directement, l'effet de démonstration est le suivant

Comment obtenir une image en cliquant pour lagrandir en utilisant du CSS pur

Bien que ce qui précède ait obtenu les résultats escomptés, il y a quelques points dont nous ne sommes pas satisfaits

  • Ce n'est pas l'effet pop-up auquel nous nous attendions, l'image originale a été compressée
  • Ce serait Ce serait mieux s'il y a un effet d'animation agrandi dans la fenêtre contextuelle (vous pouvez simplement utiliser l'animation que vous avez apprise auparavant)
  • Comment cliquer pour agrandir lorsqu'il y a beaucoup d'images dans l'image ?

Avancé

. Tout d'abord, nous voulons que ce soit une véritable fenêtre pop-up sans affecter la mise en page existante. Cela se fait généralement en définissant la position. Par exemple, nous pouvons ajouter un autre calque en dehors du modal pour devenir 

<div style=&#39;position:fixed&#39;>
    <div class=&#39;modal&#39; id=&#39;modal&#39;>
        <img  id=&#39;bgImg&#39; / alt="Comment obtenir une image en cliquant pour l'agrandir en utilisant du CSS pur" >
    </div>
</div>

. le style de la fenêtre pop-up est trop moche. Nous pouvons utiliser l'ombre de bordure que nous avons apprise auparavant pour obtenir un bel effet pop-up

  • Changez-la pour remplir l'arrière-plan avec toutes les images
  • Supprimez la couleur d'arrière-plan, ajoutez une ombre et ajoutez une bordure blanche

Le CSS modifié est le suivant

.modal {
    display: none;
    margin: auto;
    padding-top: 5%;
    width: 50%;
    height: 80%;
    z-index: 1;
    background-color: white;
}

.modal img {
    display: block;
    padding: 10px;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 2px 6px rgb(0, 0, 0, 0.2), 0 10px 20px rgb(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid white;
}

Ensuite, pensez à ajouter une animation et un effet de grossissement

@keyframes zoom {
    from {transform: scale(0.1)}
    to {transform: scale(1)}
}

.modal img {
    animation-name: zoom;
    animation-duration: 0.6s;
}

Ensuite, regardez l'effet de démonstration comme suit

Comment obtenir une image en cliquant pour lagrandir en utilisant du CSS pur

Le La prochaine étape consiste à transformer cela en une solution universelle. Prend en charge plusieurs images. Il s'agit principalement d'une modification de l'événement de clic sur l'image. Apportez simplement quelques modifications aux parties codées en dur ci-dessus

Comment obtenir une image en cliquant pour lagrandir en utilisant du CSS pur

IV. le code source est donné

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>小灰灰css学习笔记</title> 
<style>
#modal {
	display: none;
}
.modal {
    margin: auto;
    padding-top: 5%;
    width: 50%;
    height: 80%;
    z-index: 1;
}

.modal img {
    animation-name: zoom;
	animation-duration: 0.6s;
    display: block;
    padding: 10px;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 2px 6px rgb(0, 0, 0, 0.2), 0 10px 20px rgb(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid white;
}

@keyframes zoom {
    from {transform: scale(0.1)}
    to {transform: scale(1)}
}

.thum-img {
    float: left;
    width: 200px;
    height: 200px;
    margin: auto;
    display: block;
    padding: 40px;
}
</style>
	</head>
<body>
<!-- 先来实现弹窗 -->
<div style=&#39;position:fixed;width:100%;height:100%;background-color:rgb(0,0,0,0.65)&#39; id=&#39;modal&#39;>
<div class=&#39;modal&#39; id=&#39;modalw&#39;>
    <img  id=&#39;bgImg&#39; / alt="Comment obtenir une image en cliquant pour l'agrandir en utilisant du CSS pur" >
</div>
</div>


<!-- 下面则是主页内容，先只给几个图片 -->

<div>
    <img onclick=&#39;showBgImg(this)&#39; class=&#39;thum-img&#39; 
    src=&#39;http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg&#39; />
 	<img  class=&#39;thum-img&#39; src=&#39;http://a.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7ef5e886d03f1faaf51f3de666d.jpg&#39; onclick=&#39;showBgImg(this)&#39;/ alt="Comment obtenir une image en cliquant pour l'agrandir en utilisant du CSS pur" > 
    <img  class=&#39;thum-img&#39; src=&#39;http://g.hiphotos.baidu.com/image/pic/item/730e0cf3d7ca7bcb747b4a5cb2096b63f624a845.jpg&#39; onclick=&#39;showBgImg(this)&#39;/ alt="Comment obtenir une image en cliquant pour l'agrandir en utilisant du CSS pur" >
    <img  class=&#39;thum-img&#39; src=&#39;http://c.hiphotos.baidu.com/image/pic/item/b21c8701a18b87d6657856e70c0828381f30fd14.jpg&#39; onclick=&#39;showBgImg(this)&#39;/ alt="Comment obtenir une image en cliquant pour l'agrandir en utilisant du CSS pur" >
    <img  class=&#39;thum-img&#39; src=&#39;https://raw.githubusercontent.com/liuyueyi/Source/master/img/info/blogInfoV2.png&#39; onclick=&#39;showBgImg(this)&#39;/ alt="Comment obtenir une image en cliquant pour l'agrandir en utilisant du CSS pur" >
</div>

<script>
    var modal = document.getElementById(&#39;modal&#39;);
    var bgImg = document.getElementById(&#39;bgImg&#39;);


    function showBgImg(e) {
		modal.style.display = &#39;block&#39;;
		bgImg.src = e.src;
	}

	bgImg.onclick = function() {
		modal.style.display = &#39;none&#39;;
	}
</script>
</body>
</html>
recommandation Étude : "

tutoriel vidéo css

"

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!

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：Que faire si la rotation CSS3 semble irrégulière ?Article suivant：Que faire si la rotation CSS3 semble irrégulière ?

Articles Liés

Voir plus