jQueryは広告の表示と非表示のアニメーションを実装します
|
数秒後に広告が表示されて消えることがよくあります。この機能を実装するには、JQuery フレームワークを使用します。 コードは次のとおりです。
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<title>広告の自動表示と非表示</title>
<スタイル>
#コンテンツ{幅:100%;高さ:500px;背景:#999}
</スタイル>
<!--jQuery の紹介-->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<スクリプト>
/*
必要：
1. ページが読み込まれてから 3 秒後。広告を自動的に表示します 2. 広告は5秒間表示された後、自動的に消えます。
分析:
1. タイマーを使って完了します。 setTimeout (タイマーを実行する)
2. 分析の結果、JQueryの表示と非表示のアニメーション効果は実際には表示を制御していることが判明しました。
3. 表示/非表示メソッドを使用して広告を表示します*/
//エントリ関数、ページがロードされた後、タイマーを定義し、これらの2つのメソッドを呼び出します$(function () {
// タイマーを定義し、adShow メソッドを呼び出して、3 秒後に setTimeout(adShow,3000) を 1 回実行します。
// タイマーを定義し、adHide メソッドを呼び出し、8 秒後に setTimeout(adHide,8000) を実行します。
});
//ディスプレイ広告関数 adShow() {
//広告 div を取得し、表示メソッドを呼び出します $("#ad").show("slow");
}
//広告を非表示にする function adHide() {
//広告 div を取得し、hide メソッドを呼び出します $("#ad").hide("slow");
}
</スクリプト>
</head>
<本文>
<!-- 全体の DIV -->
<div>
<!-- 広告 DIV -->
<div id="広告" style="表示: なし;">
<img スタイル="width:100%" src="../img/adv.jpg" />
</div>
<!-- 以下は本文 -->
<div id="コンテンツ">
体の部分</div>
</div>
</本文>
</html>ディレクトリ構造:
実行結果:初めて入ったときは広告が表示されませんでした。
3秒後、広告が表示される
広告は5秒後に消えます。
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Linux nslookup コマンドの使用方法の詳細な説明
推薦する
Vueはシンプルなショッピングカートの例を実装します
この記事では、参考までに、Vue の具体的なコードを共有して、簡単なショッピングカートを実装します。...
MySQL NULLデータ変換方法（必読）
MySQL を使用してデータベースをクエリし、左結合を実行すると、関連付けられたフィールドの一部に...
シンプルなカルーセル効果を実現するJavaScript
カルーセルとは何ですか?カルーセル: モジュールまたはウィンドウで、コンピューターでマウスをクリック...
Vue3は独自のページングコンポーネントをカプセル化します
この記事の例では、vue3 が独自のページングコンポーネントをカプセル化する具体的なコードを参考まで...
Windows Server 2008 R2 マルチユーザー リモート デスクトップ接続ライセンス
仕事ではリモート サーバーが必要になることが多く、次の 2 つの問題に遭遇することがよくあります。 ...
JSは画像の滝の流れの効果を実現します
この記事では、画像ウォーターフォールフローを実現するためのJSの具体的なコードを参考までに共有します...
この記事では、jsのデータ型とデータ構造の世界を紹介します。
目次1. 動的型付けとは何ですか? 2. データ型2.1 プリミティブ型 (6 つのプリミティブ型、...
アイデアはDockerプラグインを使用してワンクリックの自動デプロイを実現します
目次環境： 1. Dockerはリモート接続アクセスを可能にするidea dockerプラグインをイ...
Hyper-V なしで Windows 10 を動作させるソリューション
Windows10 Home Edition でHyper-vを有効にする方法をまだ探していますか?...
MySQL グローバルロックとテーブルレベルロックの具体的な使用法
目次序文グローバルロックテーブルロックテーブルロックメタデータ ロック (MDL ロック)要約する参...
IDEA が Docker を統合してリモート展開を実現するための詳細な手順
1. Dockerサーバーへのリモートアクセスを有効にするdocker が配置されているリモート サ...
GolangでMySQLデータベースを操作するための実装コード
序文Golang は、SQL データベースにアクセスするための database/sql パッケージ...
Vueは小さなカウントダウン機能を実装します
多くのプロジェクトでは、検証コードの送信など、カウントダウン機能を実装する必要があります。ここで、簡...
JavaScriptで配列を作成する方法の詳細な説明
目次JavaScript で配列を作成する配列の使用配列を分割文字列に変換する配列に要素を追加する配...
コンパイル、インストールから設定ファイルの説明まで、中国語でnginxの詳細な説明
この記事では、コンパイルとインストールから設定ファイルの説明まで、Nginx について詳しく紹介しま...