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 コマンドの使用方法の詳細な説明
推薦する
CentOS7におけるKVM仮想化の基本管理の詳しい説明
1. kvm仮想化をインストールする : : : : : : : : : : : : : : : :...
MySQL sql_mode の使用に関する詳細な説明
目次序文sql_mode の説明最も重要なオプションすべてのオプション要約する序文前回の記事「MyS...
フィールドを結合するSQL関数
最近、関連テーブル内のすべてのフィールドをクエリし、それらを 1 つのフィールドに再グループ化する必...
Web デザイン TabIndex 要素
TabIndex は、Tab キーを押して、定義された TabIndex 要素を順番に取得し、各要素...
フロントエンドページのスライド検証を実装するための JavaScript + HTML (2)
この記事の例では、クールなフロントエンドページのスライド検証の具体的なコードを参考までに共有していま...
MySQL 8.0.11 インストール概要チュートリアル図
インストール環境: CAT /etc/os-release CentOS システムのバージョン情報を...
JavaScriptオブジェクト指向について学ぼう
目次JavaScript プロトタイプチェーンオブジェクトプロトタイプトップレベルのプロトタイプOb...
Ubuntu 18.04 Server に静的 IP を設定する方法
1. 背景Netplan は、Ubuntu システムのネットワーク設定を簡単に管理および構成できるよ...
MySQL 5.7 クラスタ構成手順
目次1. サーバーAのmy.cnfファイルを変更する2. サーバーBのmy.cnfファイルを変更する...
CSS3 と JavaScript を使用して Web カラー ピッカーのサンプル コードを開発する
この例の Web カラー ピッカー機能は、ページ効果を実現するために CSS3 を使用します。つまり...
Windows で mysql 8.0.12 をインストールするための詳細なチュートリアル
この記事では、MySQL 8.0.12のインストール方法に関する詳細なチュートリアルを参考までに紹介...
Dockerイメージのインポートとエクスポートの実装
GitLabのDocker使用法gitlab ドッカー起動コマンド docker run -d -p...
MySQL での正規表現の使用に関する詳細
目次1. はじめに2. 製品テーブルを準備する2.1 ステートメントの順序2.2 大文字と小文字の区...
mysqlとnavicat間の接続を確立する際の1251エラーを解決する
コンピュータを再インストールし、最新バージョンのMySQLデータベースをインストールしました。その結...
フォント宝庫 50 種類の素晴らしい無料英語フォントリソース パート 2
デザイナーは独自のフォント ライブラリを持っているため、プロジェクトの設計時にすぐに使用できます。今...