jqueryマスクは3秒後に消えます-フロントエンドQ&A-php.cn

jqueryマスクは3秒後に消えます

王林

リリース： 2023-05-25 10:51:07

オリジナル

540 人が閲覧しました

Web サイト開発では、さまざまなインタラクティブ効果を実現するために JavaScript ライブラリ jQuery がよく使用されます。その中で、マスクレイヤーのインタラクティブ効果も非常に一般的です。マスクレイヤーは、ページを覆う半透明のマスクレイヤーで、ページを操作する前にユーザーに現在のレイヤーのインタラクションタスクの処理を強制します。具体的な実装プロセスでは、jQuery の fadeOut() メソッドを使用して、マスクレイヤが 3 秒後に自動的に消える効果を実現できます。

まず、fadeOut() メソッドについて学びましょう。このメソッドは、一致する要素とその兄弟すべてを徐々にフェードアウトし、最終的には消えるために使用されます。このメソッドは、要素の不透明度を変更することで機能します。 jQuery の fadeOut() メソッドにはいくつかのオプションパラメータがあり、その中で最も一般的に使用されるのは速度設定パラメータで、エフェクト時間のミリ秒数を定義するために使用されます。速度パラメータ値が「遅い」、「速い」、または特定のミリ秒値の場合、フェードアウトエフェクトの実行速度は異なります。これに加えて、jQuery は、さまざまなイージング効果を実現するイージングや、フェードアウトの完了後にコールバック関数を実行する完全なパラメーターなど、その他の追加パラメーターも提供します。

ここで、マスクレイヤーの HTML を含め、3 秒後に自動的に消えるマスクレイヤーを実装する jQuery コードを作成してみましょう。まず、テスト用のマスクレイヤーとコンテンツ領域を含む HTML ファイルを定義する必要があります。コードは次のとおりです。

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

ログイン後にコピー

head タグで、2 つの CSS スタイル #mask と #content を定義し、それぞれマスクレイヤーをオンにし、テスト用のコンテンツ領域のスタイルを定義します。このうち #mask は位置を絶対に設定し、全画面表示にして最上位にレイアウトします。背景はrgba(0,0,0,.5)の半透明の黒です。 text-align 属性は、コンテンツ領域を中央に配置します。 z-index 属性は、Web ページの他の要素よりも高いマスクレイヤーのレベルを設定します。表示属性はマスクレイヤーのデフォルト状態を設定します。初期状態は表示されず、jQuery スクリプトが表示を制御するのを待ちます。 #content スタイルは、マスクレイヤーの中央のテストコンテンツ領域を占めるように設計されており、純粋なスタイル定義であり、JavaScript の実装には影響しません。

ここで、マスクレイヤーの表示と非表示を制御する jQuery スクリプトを作成する必要があります。 jQuery の setTimeout() メソッドを使用して、3 秒後にマスクレイヤーの fadeOut() メソッドをトリガーし、マスクが消える効果を実現します。コードは次のとおりです:

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

ログイン後にコピー

上記の jQuery コードは明確で簡潔です。まず、ドキュメントの準備ができた後、fadeIn() メソッドを使用してマスクレイヤーの表示を制御します。 setTimeout() メソッドは関数と時間パラメーターを受け取り、関数は指定された時間の経過後に実行されます。ここでは時間を 3 秒に設定し、時間が経過したら fadeOut() メソッドを実行してマスクレイヤを徐々にフェードアウトし、最終的に非表示にします。 fadeOut() メソッドは速度パラメーターを使用してフェードアウト効果の持続時間を定義できますが、この場合は詳しく説明する必要はありません。

上記のコードを完了した後、ブラウザでこのコードを実行すると、ページにマスクレイヤーが表示され、3 秒後に自動的に消えることがわかります。コードを任意の HTML ページに埋め込んで、ページがアンロードされた後にマスクレイヤーを自動的に非表示にすることができます。

要約すると、jQuery はさまざまな Web ページ効果を迅速かつ簡単に実現するのに役立ちます。一般的なインタラクティブ効果として、マスクレイヤーは Web サイト開発で特によく使用されます。この記事では、jQuery の fadeOut() メソッドと setTimeout() メソッドを使用して、マスクレイヤが 3 秒後に自動的に消える効果を実現します。これは、便利で簡単な実装方法を提供するだけでなく、Web サイト開発における jQuery の柔軟な使用法を示しています。

以上がjqueryマスクは3秒後に消えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。