ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryマスクは3秒後に消えます
jqueryマスクは3秒後に消えます
- 王林オリジナル
- 2023-05-25 10:51:07582ブラウズ
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 サイトの他の関連記事を参照してください。