interface Web
Questions et réponses frontales
le masque jquery disparaît après trois secondes
le masque jquery disparaît après trois secondes
Dans le développement de sites Web, la bibliothèque JavaScript jQuery est souvent utilisée pour obtenir divers effets interactifs. Parmi eux, l'effet interactif du calque de masque est également très courant. Le calque de masque est un calque de masque semi-transparent recouvrant la page pour forcer l'utilisateur à gérer les tâches d'interaction du calque actuel avant d'interagir avec la page. Dans le processus d'implémentation spécifique, nous pouvons utiliser la méthode fadeOut() de jQuery pour obtenir l'effet de la disparition automatique du calque de masque après trois secondes.
Commençons par comprendre la méthode fadeOut(). Cette méthode est utilisée pour faire disparaître progressivement l'élément correspondant et tous ses frères, pour finalement disparaître. Cette méthode fonctionne en modifiant l'opacité de l'élément. La méthode fadeOut() de jQuery possède des paramètres facultatifs, dont le plus couramment utilisé est le paramètre de configuration de la vitesse, qui est utilisé pour définir le nombre de millisecondes du temps d'effet. Lorsque la valeur du paramètre de vitesse est « lente », « rapide » ou une valeur spécifique en millisecondes, l'effet de fondu a des vitesses d'exécution différentes. En plus de cela, jQuery fournit également d'autres paramètres supplémentaires, tels que l'accélération pour obtenir différents effets d'accélération, et le paramètre complet pour exécuter une fonction de rappel une fois le fondu terminé.
Écrivons maintenant un code jQuery qui implémente que le calque de masque disparaît automatiquement après trois secondes, y compris le code HTML du calque de masque. Tout d’abord, vous devez définir un fichier HTML, comprenant un calque de masque et une zone de contenu à tester. Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 三秒后遮罩消失</title>
<style type="text/css">
#mask{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.5);
text-align: center;
z-index: 9999;
display: none;
}
#content{
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-100px;
background:#ddd;
color:#333;
width:200px;
height:100px;
text-align:center;
line-height:100px;
}
</style>
</head>
<body>
<div id="mask">
<div id="content">这是一个测试内容区域</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
</script>
</html>Dans la balise head, nous avons défini deux styles CSS #mask et #content, activant respectivement le calque de masque et définissant le style de la zone de contenu à tester. Parmi eux, #mask définit la position sur absolue, ce qui lui permet d'afficher le plein écran et la mise en page au niveau supérieur. L'arrière-plan est noir translucide rgba(0,0,0,.5). L'attribut text-align centre la zone de contenu. L'attribut z-index définit le niveau du calque de masque, plus élevé que les autres éléments de la page Web. L'attribut display définit l'état par défaut de la couche de masque. L'état initial n'est pas affiché, en attendant que le script jQuery contrôle son affichage. Le style #content est conçu pour occuper la zone de contenu de test au centre de la couche de masque. Il s'agit d'une pure définition de style et n'affecte pas l'implémentation de JavaScript.
Maintenant, nous devons écrire un script jQuery pour contrôler l'apparition et la disparition du calque de masque. Nous utilisons la méthode setTimeout() de jQuery pour déclencher la méthode fadeOut() du calque de masque après trois secondes afin d'obtenir l'effet de disparition du masque. Le code est le suivant :
<script type="text/javascript">
$(document).ready(function(){
$("#mask").fadeIn(); //控制遮罩层的显示
setTimeout(function(){
$("#mask").fadeOut(); //控制遮罩层的隐藏
},3000);
});
</script>Le code jQuery ci-dessus est clair et concis. Tout d'abord, utilisez la méthode fadeIn() pour contrôler l'affichage du calque de masque une fois le document prêt. La méthode setTimeout() prend une fonction et un paramètre time, et la fonction est exécutée après l'heure spécifiée. Ici, nous définissons un temps de trois secondes, et lorsque le temps est écoulé, exécutons la méthode fadeOut() pour faire disparaître progressivement le calque de masque et enfin le masquer. Notez que la méthode fadeOut() peut utiliser un paramètre de vitesse pour définir la durée de l'effet de fondu, mais dans ce cas il n'est pas nécessaire d'entrer dans les détails.
Après avoir complété le code ci-dessus, vous pouvez exécuter ce code dans le navigateur et voir le calque de masque apparaître sur la page et disparaître automatiquement après trois secondes. Vous pouvez intégrer le code dans n'importe quelle page HTML pour faire disparaître automatiquement le calque de masque une fois la page déchargée.
Pour résumer, jQuery peut nous aider à obtenir rapidement et facilement divers effets de page Web. En tant qu'effet interactif courant, le calque de masque est particulièrement couramment utilisé dans le développement de sites Web. Dans cet article, nous utilisons les méthodes fadeOut() et setTimeout() de jQuery pour obtenir l'effet de disparition automatique du calque de masque après trois secondes. Cela nous fournit non seulement une méthode de mise en œuvre pratique et simple, mais démontre également l'utilisation flexible de jQuery dans le développement de sites Web.
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)
Sujets chauds
1369
52
Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires?
Mar 19, 2025 pm 03:58 PM
L'article traite de l'utilisation Effecte dans React, un crochet pour gérer les effets secondaires comme la récupération des données et la manipulation DOM dans les composants fonctionnels. Il explique l'utilisation, les effets secondaires courants et le nettoyage pour éviter des problèmes comme les fuites de mémoire.
Expliquez le concept de chargement paresseux.
Mar 13, 2025 pm 07:47 PM
Le chargement paresseux retarde le chargement du contenu jusqu'à ce qu'il soit nécessaire, améliorant les performances du Web et l'expérience utilisateur en réduisant les temps de chargement initiaux et la charge du serveur.
Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable?
Mar 18, 2025 pm 01:44 PM
Les fonctions d'ordre supérieur dans JavaScript améliorent la concision du code, la réutilisabilité, la modularité et les performances par abstraction, modèles communs et techniques d'optimisation.
Comment fonctionne le currying en JavaScript et quels sont ses avantages?
Mar 18, 2025 pm 01:45 PM
L'article traite du curry dans JavaScript, une technique transformant les fonctions mulguments en séquences de fonctions à argument unique. Il explore la mise en œuvre du currying, des avantages tels que des applications partielles et des utilisations pratiques, améliorant le code
Comment fonctionne l'algorithme de réconciliation React?
Mar 18, 2025 pm 01:58 PM
L'article explique l'algorithme de réconciliation de React, qui met à jour efficacement le DOM en comparant les arbres DOM virtuels. Il traite des avantages de la performance, des techniques d'optimisation et des impacts sur l'expérience utilisateur. Compte de charge: 159
Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants?
Mar 19, 2025 pm 03:59 PM
L'article explique UseContext dans React, qui simplifie la gestion de l'État en évitant le forage des accessoires. Il traite des avantages tels que les améliorations centralisées de l'État et des performances grâce à des redevances réduites.
Comment connectez-vous les composants React au magasin Redux à l'aide de Connect ()?
Mar 21, 2025 pm 06:23 PM
L'article discute de la connexion des composants React à Redux Store à l'aide de Connect (), expliquant MapStateToproprop, MapDispatchToprops et des impacts de performances.
Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements?
Mar 19, 2025 pm 04:10 PM
L'article discute de la prévention des comportements par défaut dans les gestionnaires d'événements à l'aide de la méthode empêchée dedEfault (), de ses avantages tels que une expérience utilisateur améliorée et des problèmes potentiels tels que les problèmes d'accessibilité.
