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