interface Web
Questions et réponses frontales
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
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.
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='modal' id='modal'>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/622/244/178/1674887775582644.jpg" class="lazy" id='bgImg' / alt="Comment obtenir une image en cliquant pour l'agrandir en utilisant du CSS pur" >
</div>
<!-- 下面则是主页内容，先只给几个图片 -->
<div>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/622/244/178/1674887775582644.jpg" class="lazy" class='thum-img'
src='http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg' />
</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('modal');
var bgImg = document.getElementById('bgImg');
var thumImg = document.getElementById('thumImg');
thumImg.onclick = function() {
modal.style.display = 'block';
bgImg.src = this.src;
}
bgImg.onclick = function() {
modal.style.display = 'none';
}
</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
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='position:fixed'>
<div class='modal' id='modal'>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/742/960/488/1674887791873102.jpg" class="lazy" id='bgImg' / 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
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
<!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='position:fixed;width:100%;height:100%;background-color:rgb(0,0,0,0.65)' id='modal'>
<div class='modal' id='modalw'>
<img id='bgImg' / alt="Comment obtenir une image en cliquant pour l'agrandir en utilisant du CSS pur" >
</div>
</div>
<!-- 下面则是主页内容，先只给几个图片 -->
<div>
<img onclick='showBgImg(this)' class='thum-img'
src='http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg' />
<img class='thum-img' src='http://a.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7ef5e886d03f1faaf51f3de666d.jpg' onclick='showBgImg(this)'/ alt="Comment obtenir une image en cliquant pour l'agrandir en utilisant du CSS pur" >
<img class='thum-img' src='http://g.hiphotos.baidu.com/image/pic/item/730e0cf3d7ca7bcb747b4a5cb2096b63f624a845.jpg' onclick='showBgImg(this)'/ alt="Comment obtenir une image en cliquant pour l'agrandir en utilisant du CSS pur" >
<img class='thum-img' src='http://c.hiphotos.baidu.com/image/pic/item/b21c8701a18b87d6657856e70c0828381f30fd14.jpg' onclick='showBgImg(this)'/ alt="Comment obtenir une image en cliquant pour l'agrandir en utilisant du CSS pur" >
<img class='thum-img' src='https://raw.githubusercontent.com/liuyueyi/Source/master/img/info/blogInfoV2.png' onclick='showBgImg(this)'/ alt="Comment obtenir une image en cliquant pour l'agrandir en utilisant du CSS pur" >
</div>
<script>
var modal = document.getElementById('modal');
var bgImg = document.getElementById('bgImg');
function showBgImg(e) {
modal.style.display = 'block';
bgImg.src = e.src;
}
bgImg.onclick = function() {
modal.style.display = 'none';
}
</script>
</body>
</html>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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment utiliser Bootstrap en Vue
Apr 07, 2025 pm 11:33 PM
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Comment écrire des lignes fendues sur bootstrap
Apr 07, 2025 pm 03:12 PM
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Comment redimensionner le bootstrap
Apr 07, 2025 pm 03:18 PM
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
Comment configurer le cadre de bootstrap
Apr 07, 2025 pm 03:27 PM
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comprendre HTML, CSS et JavaScript: un guide pour débutant
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.
Comment utiliser le bouton bootstrap
Apr 07, 2025 pm 03:09 PM
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
