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 コマンドの使用方法の詳細な説明
推薦する
TypeScript のユニオン型、交差型、型ガード
目次1. ユニオンタイプ2. クロスオーバータイプ3. 型保護3.1 カスタム型保護3.2 保護の種...
IIS を使用して X-Forwarded-For ヘッダー (XFF) を呼び出して訪問者の実際の IP を記録する 2 つの方法
問題: IIS を通じて公開された Web サイトは F5 デバイスの背後に配置されています。透過的...
MySQL 接続制御プラグインの紹介
目次1. 接続制御プラグイン（connection_control）の紹介1.1 connectio...
シェルスクリプトによるDockerコンテナの起動順序の制御の詳細な説明
1. 遭遇した問題分散プロジェクトの展開プロセスでは、サーバーの再起動後にアプリケーション（データベ...
MySQLシリーズのMariaDBサーバーのインストール
目次チュートリアルシリーズ1. yumパッケージマネージャーを使用してMariaDBサーバーをインス...
jQueryはアコーディオン効果を実装します
この記事では、アコーディオンを実装するためのjQueryの具体的なコードを参考までに紹介します。具体...
画像ソーシャルネットワーキングサイトのUIアプリケーションの比較分析（図）
私たちの生活、仕事、勉強において、ソーシャル ネットワークは徐々に将来のインターネット発展のトレンド...
Vue バインディング オブジェクト、配列データを動的にレンダリングできないケースの詳細な説明
プロジェクトシナリオ: Dark Horse Vueプロジェクト管理の実践、製品分類の取得、拡張バー...
Linux でのログ サーバーの設定に関するグラフィック チュートリアル
序文この記事では、Linux 構成ログ サーバーに関する関連コンテンツを主に紹介し、参考と学習のため...
Dockerコンテナの接続と通信の実装
ポート マッピングは、Docker を別のコンテナーに接続する唯一の方法ではありません。 Docke...
MySQL ユーザーのホスト属性を素早く変更する方法
MySQL にリモートでログインする場合、使用するアカウントには特別な要件があります。アカウントのデ...
MySQL 8.0.14 のインストールと設定方法のグラフィックチュートリアル
この記事では、MySQL 8.0.14のインストールと設定のプロセスを記録しています。具体的な内容は...
Vueはページング機能を実装する
この記事の例では、ページング機能を実装するためのVueの具体的なコードを参考までに共有しています。具...
MySQL における := と = の違いをグラフィカルに紹介
:= と = の違い=設定および更新の場合にのみ、:= と同じ効果、つまり代入効果があり、それ以外の...
HTML でフレームセット タグを使用するチュートリアル
フレームセット ページは通常の Web ページとは多少異なります。依然として <HTML>...