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 コマンドの使用方法の詳細な説明
推薦する
Vue2/vue3 ルーティング権限管理方法の例
1. Vueルーティングの権限制御には一般的に2つの方法がありますa. ルーティングメタ情報（メタ）...
Vuex のコアコンセプトと基本的な使用法の詳細な説明
目次導入始めるインストール①直接ダウンロードする方法②CND法③NPM方式④糸法NPMインストールの...
MySQL マスタースレーブレプリケーションの原理と注意点
前面に書かれた最近、Mycat で特別なトピックを書いています。最近、多くの友人が面接に出かけている...
Bツリー挿入プロセスの概要
前回の記事 https://www.jb51.net/article/154153.htm では、B...
NodeとPythonの双方向通信実装コード
目次プロセスコミュニケーションプロセス間の双方向通信問題要約するサードパーティのデータ サプライヤー...
Nginxの書き換えモジュールの詳細な説明
書き換えモジュールは ngx_http_rewrite_module モジュールです。その主な機能は...
mysqldumpデータエクスポートの問題に関する詳細な議論
1. mysqldump の使用時にエラー (1064) が報告されます。これは、mysqldump...
MySQL 8.0.18 はクローンプラグインを使用して MGR 実装を再構築します
3 ノード MGR 内の 1 つのノードに異常があり、MGR クラスターに再度追加する必要があるとし...
Ubuntu 18.04 システムでの Redis および phpredis 拡張機能のインストールと設定の詳細な説明
この記事では、Ubuntu 18.04 に Redis と phpredis 拡張機能をインストール...
MySQL の日付フォーマットと複雑な日付範囲クエリ
目次序文クエリの使用シナリオ例時間間隔クエリクエリ日付と今日の時間の比較データ一般的なサイクルタイム...
バランスの取れたデジタルスクロール効果を実現するJavaScript
目次1. 実施の背景2. 実装のアイデア3. 実施プロセス1. 実施の背景先週、ユーザーがタスクを完...
jQueryは画像追従効果を実現します
この記事では、画像フォロー効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具...
docker cp ファイルをコピーしてコンテナに入る
実行中のコンテナに入る # コンテナに入り、新しいターミナルを開きます# docker exec -...
jQueryは何に使われるのですか？jQueryは実際にはjsフレームワークです
jQuery 入門jQuery ライブラリは、簡単なマークアップ行を使用して Web ページに追加で...
Windows Server 2016 に Docker をインストールする方法
最近、Microsoft は Docker をネイティブにサポートする Windows Server...