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 コマンドの使用方法の詳細な説明
推薦する
Windowsにmysql5.7をインストールする方法
まずmysqlの圧縮バージョンをダウンロードします。公式ダウンロードアドレスは123WORDPRES...
React プロジェクトで eslint の Baidu スタイルを使用する詳細な説明
1. Baidu Eslint Ruleプラグインをインストールする npm i -D eslint...
ユーザー名が使用可能かどうかを確認するVueメソッド
この記事では、ユーザー名が使用可能かどうかを確認するためのVueの具体的なコードを例として紹介します...
SQLベースのクエリステートメント
目次1. 基本的なSELECT文1. 指定されたフィールドをクエリする3. エイリアスを設定する4....
Centos6にMysql5.7をインストールする方法
環境セントロス6.6 MySQL 5.7インストールシステムがインストールされている場合は、まずアン...
Tomcatの各ポートの機能の詳細な説明
tomcat 設定ファイルから、tomcat の起動時にデフォルトで 8080 (8443)、800...
CSS を使用して複数の方法で等幅レイアウトを実装するサンプルコード
この記事で説明する等幅レイアウトでは、純粋な CSS を使用して、要素の幅を手動で設定することなく、...
MySQLクエリ速度を最適化する方法
前の章では、高性能な MySQL に不可欠な、最適化されたデータ型の選択方法とインデックスの効率的な...
CSS3で線形グラデーションを実装するためのコードの詳細な説明
序文デモでは古いバージョンのブラウザのグラデーションが実装されています[IE9-]。 IE9 より前...
Windows 8.1 で MySQL5.7 のルート パスワードを忘れた場合の解決方法
【背景】最近勉強中に非常に恥ずかしいことに遭遇しました。MySQL のパスワードを忘れてしまい、My...
SSDストレージを有効にしたMySQLインスタンスの詳細な説明
SSDストレージを有効にしたMySQLインスタンスの詳細な説明特に OS と MySQL が同じディ...
NodeJSのモジュール性に関する詳細な説明
目次1. はじめに2. 本文2.1 モジュールとは何ですか? 2.2 解決2.3、require.r...
HTML&CSS&JS 互換性ツリー (IE、Firefox、Chrome)
Web デザインにおけるツリーとは何ですか?簡単に言うと、リンクをクリックするとサブディレクトリが展...
MySQL シリーズ 11 ログ
チュートリアルシリーズMySQL シリーズ: MySQL リレーショナル データベースの基本概念My...
アイデアをDockerに接続してワンクリックでデプロイする方法
1. docker設定ファイルを変更し、ポート2375を開きます。 [root@s162 docke...