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 コマンドの使用方法の詳細な説明
推薦する
CSS3入力ボックスの実装コードはGoogleログインのアニメーション効果に似ています
CSS3を使用して、Googleログインページと同様の入力ボックスをアニメーション化します。効果1 ...
JS for ループで setTimeout を使用する 4 つのソリューション
目次概要解決策 1: クロージャ解決策2: 構造を分割する解決策3：解決策4: setTimeout...
CentOS システムの rpm インストールと Nginx の設定
目次CentOS rpm のインストールと Nginx の設定導入rpm パッケージのインストールサ...
Vue 2.0 の基礎を詳しく解説
目次1. 特徴2. 例3. オプション4. 基本的な文法5. ライフサイクル6. ルーティング管理 ...
nginx の http リクエスト処理の各段階の詳細な分析
nginx の HTTP モジュールを作成する場合、リクエスト開始時のアクセス許可の有無、コンテンツ...
MySQL 完全崩壊: クエリフィルタ条件の詳細な説明
概要実際のビジネス シナリオ アプリケーションでは、ビジネス条件に基づいて対象データを取得およびフィ...
MySQLは、where in()順序ソートを実装するためにfind_in_set()関数を使用します。
この記事では、MySQL で find_in_set() 関数を使用して where in() の順...
aタグ疑似クラスの機能と記述順序は何ですか？
a タグ疑似クラスの役割: 「:link」: 訪問されていないタグの状態。 「:visited」: ...
Docker ネットワークの原理とカスタム ネットワークの詳細な分析
Docker はホストマシン上のブリッジを仮想化します。コンテナを作成して起動すると、各コンテナには...
HTML知識ポイントの実践経験のまとめ
1. 表タグはtable、trは行、tdはセル、cellspacingはセル間の距離、cellpad...
Dockerコンテナのタイムゾーン調整操作
Docker コンテナのタイムゾーンがホストマシンと一致しているかどうかを確認するにはどうすればよい...
Vue の高度な使用方法チュートリアル 動的コンポーネント
目次基本的な説明AST 解析レンダリング機能通常コンポーネントと動的コンポーネントの比較ファクトリ関...
Alibaba Cloud MySQL スペースをクリーンアップする方法
今日、Alibaba Cloudからディスク警告通知を受け取りました。確認したところ、100Gのスペ...
vue3.0 のウォッチ リスナーの例の詳細な説明
目次序文リスナーと計算プロパティの違いvue3 で watch を使用するにはどうすればいいですか?...
Linux で Golang をインストールする方法
Go は、シンプルで信頼性が高く、効率的なソフトウェアを簡単に構築できるオープンソース プログラミン...