Comment obtenir une image en cliquant pour l'agrandir en utilisant du CSS pur-Questions et réponses frontales-php.cn

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

藏色散人

Libérer： 2023-01-28 14:40:34

original

2280 Les gens l'ont consulté

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 "

"; 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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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!