Maison > Article > interface Web > le masque jquery disparaît après trois secondes

le masque jquery disparaît après trois secondes

王林original: 2023-05-25 10:51:07549parcourir

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!

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：jquery change le nom de la classe d'élémentArticle suivant：jquery change le nom de la classe d'élément

Articles Liés

Voir plus