jQueryは広告の表示と非表示のアニメーションを実装します

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jQueryアニメーション操作の完全な例の分析
  • JQuery アニメーション アプリケーションの例
  • JQueryの基本的なアニメーション操作の詳細な説明
  • [jQuery] イベントとアニメーションの詳しい説明
  • jQueryアニメーションを理解するのに役立つ記事

<<:  MySQLのインデックス

>>:  Linux nslookup コマンドの使用方法の詳細な説明

推薦する

TypeScript のユニオン型、交差型、型ガード

目次1. ユニオンタイプ2. クロスオーバータイプ3. 型保護3.1 カスタム型保護3.2 保護の種...

IIS を使用して X-Forwarded-For ヘッダー (XFF) を呼び出して訪問者の実際の IP を記録する 2 つの方法

問題: IIS を通じて公開された Web サイトは F5 デバイスの背後に配置されています。透過的...

MySQL 接続制御プラグインの紹介

目次1. 接続制御プラグイン(connection_control)の紹介1.1 connectio...

シェルスクリプトによるDockerコンテナの起動順序の制御の詳細な説明

1. 遭遇した問題分散プロジェクトの展開プロセスでは、サーバーの再起動後にアプリケーション(データベ...

MySQLシリーズのMariaDBサーバーのインストール

目次チュートリアルシリーズ1. yumパッケージマネージャーを使用してMariaDBサーバーをインス...

jQueryはアコーディオン効果を実装します

この記事では、アコーディオンを実装するためのjQueryの具体的なコードを参考までに紹介します。具体...

画像ソーシャルネットワーキングサイトのUIアプリケーションの比較分析(図)

私たちの生活、仕事、勉強において、ソーシャル ネットワークは徐々に将来のインターネット発展のトレンド...

Vue バインディング オブジェクト、配列データを動的にレンダリングできないケースの詳細な説明

プロジェクトシナリオ: Dark Horse Vueプロジェクト管理の実践、製品分類の取得、拡張バー...

Linux でのログ サーバーの設定に関するグラフィック チュートリアル

序文この記事では、Linux 構成ログ サーバーに関する関連コンテンツを主に紹介し、参考と学習のため...

Dockerコンテナの接続と通信の実装

ポート マッピングは、Docker を別のコンテナーに接続する唯一の方法ではありません。 Docke...

MySQL ユーザーのホスト属性を素早く変更する方法

MySQL にリモートでログインする場合、使用するアカウントには特別な要件があります。アカウントのデ...

MySQL 8.0.14 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.14のインストールと設定のプロセスを記録しています。具体的な内容は...

Vueはページング機能を実装する

この記事の例では、ページング機能を実装するためのVueの具体的なコードを参考までに共有しています。具...

MySQL における := と = の違いをグラフィカルに紹介

:= と = の違い=設定および更新の場合にのみ、:= と同じ効果、つまり代入効果があり、それ以外の...

HTML でフレームセット タグを使用するチュートリアル

フレームセット ページは通常の Web ページとは多少異なります。依然として <HTML>...