Die JQuery-Maske verschwindet nach drei Sekunden-Front-End-Fragen und Antworten-php.cn

Die JQuery-Maske verschwindet nach drei Sekunden

王林

Freigeben： 2023-05-25 10:51:07

Original

578 Leute haben es durchsucht

Bei der Website-Entwicklung wird häufig die JavaScript-Bibliothek jQuery verwendet, um verschiedene interaktive Effekte zu erzielen. Unter diesen ist auch der interaktive Effekt der Maskenebene weit verbreitet. Die Maskenebene ist eine halbtransparente Maskenebene, die die Seite bedeckt, um den Benutzer zu zwingen, die Interaktionsaufgaben der aktuellen Ebene zu verarbeiten, bevor er mit der Seite interagiert. Während des spezifischen Implementierungsprozesses können wir die fadeOut()-Methode von jQuery verwenden, um den Effekt zu erzielen, dass die Maskenebene nach drei Sekunden automatisch verschwindet.

Lernen wir zunächst etwas über die fadeOut()-Methode. Diese Methode wird verwendet, um das passende Element und alle seine Geschwister nach und nach auszublenden und schließlich zu verschwinden. Bei dieser Methode wird die Deckkraft des Elements geändert. Die fadeOut()-Methode von jQuery verfügt über einige optionale Parameter. Der am häufigsten verwendete Parameter ist der Geschwindigkeitskonfigurationsparameter, mit dem die Anzahl der Millisekunden der Effektzeit definiert wird. Wenn der Geschwindigkeitsparameterwert „langsam“, „schnell“ oder ein bestimmter Millisekundenwert ist, hat der Ausblendeffekt unterschiedliche Laufgeschwindigkeiten. Darüber hinaus bietet jQuery auch einige andere zusätzliche Parameter, z. B. Easing, um verschiedene Easing-Effekte zu erzielen, und den vollständigen Parameter zum Ausführen einer Rückruffunktion nach Abschluss des Fadeouts.

Jetzt schreiben wir einen jQuery-Code, der die Maskenebene so implementiert, dass sie nach drei Sekunden automatisch verschwindet, einschließlich des HTML der Maskenebene. Zunächst müssen Sie eine HTML-Datei definieren, einschließlich einer Maskenebene und eines Inhaltsbereichs zum Testen. Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Im Head-Tag definieren wir zwei CSS-Stile #mask und #content, indem wir jeweils die Maskenebene aktivieren und den Stil des Inhaltsbereichs zum Testen definieren. Unter anderem setzt #mask die Position auf absolut, sodass der Vollbildmodus und das Layout auf der obersten Ebene angezeigt werden. Der Hintergrund ist rgba(0,0,0,.5) durchscheinendes Schwarz. Das text-align-Attribut zentriert den Inhaltsbereich. Das Z-Index-Attribut legt die Ebene der Maskenebene höher als bei anderen Elementen der Webseite fest. Das Anzeigeattribut legt den Standardstatus der Maskenebene fest. Der Anfangsstatus wird nicht angezeigt und wartet darauf, dass das jQuery-Skript seine Anzeige steuert. Der #content-Stil ist so konzipiert, dass er den Testinhaltsbereich in der Mitte der Maskenebene einnimmt. Es handelt sich um eine reine Stildefinition und hat keinen Einfluss auf die JavaScript-Implementierung.

Jetzt müssen wir ein jQuery-Skript schreiben, um das Erscheinen und Verschwinden der Maskenebene zu steuern. Wir verwenden die setTimeout()-Methode von jQuery, um nach drei Sekunden die fadeOut()-Methode der Maskenebene auszulösen und so den Effekt des Verschwindens der Maske zu erzielen. Der Code lautet wie folgt:

<script type="text/javascript">
$(document).ready(function(){
    $("#mask").fadeIn();    //控制遮罩层的显示
    setTimeout(function(){
        $("#mask").fadeOut();   //控制遮罩层的隐藏
    },3000);        
});
</script>

Nach dem Login kopieren

Der obige jQuery-Code ist klar und prägnant. Verwenden Sie zunächst die fadeIn()-Methode, um die Anzeige der Maskenebene zu steuern, nachdem das Dokument fertig ist. Die Methode setTimeout() akzeptiert eine Funktion und einen Zeitparameter und die Funktion wird nach der angegebenen Zeit ausgeführt. Hier legen wir eine Zeit von drei Sekunden fest und führen nach Ablauf der Zeit die Methode fadeOut() aus, um die Maskenebene schrittweise auszublenden und schließlich auszublenden. Beachten Sie, dass die fadeOut()-Methode einen Geschwindigkeitsparameter verwenden kann, um die Dauer des Fadeout-Effekts zu definieren, aber in diesem Fall ist es nicht notwendig, ins Detail zu gehen.

Nachdem Sie den obigen Code ausgefüllt haben, können Sie diesen Code im Browser ausführen und sehen, wie die Maskenebene auf der Seite erscheint und nach drei Sekunden automatisch verschwindet. Sie können den Code in jede HTML-Seite einbetten, um die Maskenebene nach dem Entladen der Seite automatisch verschwinden zu lassen.

Zusammenfassend lässt sich sagen, dass jQuery uns dabei helfen kann, verschiedene Webseiteneffekte schnell und einfach zu realisieren. Die Maskenebene wird als häufiger interaktiver Effekt besonders häufig in der Website-Entwicklung verwendet. In diesem Artikel verwenden wir die fadeOut()-Methode und die setTimeout()-Methode von jQuery, um den Effekt zu erzielen, dass die Maskenebene nach drei Sekunden automatisch verschwindet. Dies bietet uns nicht nur eine bequeme und einfache Implementierungsmethode, sondern demonstriert auch den flexiblen Einsatz von jQuery bei der Website-Entwicklung.

Das obige ist der detaillierte Inhalt vonDie JQuery-Maske verschwindet nach drei Sekunden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!