広告を閉じる効果を実現するJavascript

広告を閉じる効果を実現するJavascript

参考までに、Javascript を使用して広告を閉じる方法に関するケース スタディを示します。詳細は次のとおりです。

まだフロントエンドの勉強中です。不規則なコードや間違ったアイデアがあったらご容赦ください。アドバイスをよろしくお願いします。

ウェブページには煩わしい小さな広告が表示されることがよくありますが、通常、広告を閉じるための特定の位置とアイコンが広告の横にあります。以下のJSコードは、単純に実装するために使用されます。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
  <スタイル>
    *{
      パディング: 0;
      マージン: 0;
      境界線: 0;
    }
    .gg{
      幅: 100%;
      高さ: 300px;
      背景画像: url("../images/JD.png");
    }
    .img{
      幅: 20px;
      高さ: 20px;
      フロート: 右;
    }
  </スタイル>
</head>
<本文>
<div class="gg">
  <img class="img" src="../images/2.jpg" title="閉じる">
</div>
<スクリプト>
  var gg = document.querySelector('.gg')
  var mg = document.querySelector('img')
  mg.onclick = 関数(){
    gg.style.display = 'なし'
  }
</スクリプト>
</本文>
</html>

コードの説明

ここでの原理は非常にシンプルです。div の下部に煩わしい広告画像を配置し、その上に閉じることを示す小さなアイコンを配置し、それを小さな広告の右上隅に配置します。次にイベントを取得し、onclick のときに関数がトリガーされます。関数の内容は、この大きな div ボックスを直接非表示にして表示しないようにすることで、広告を閉じるという目的を達成します。

デモンストレーション効果

右上に注目

設定した場所をクリックした後

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JSがクローズアップ小広告特殊効果を実現
  • JSは、閉会の連句広告効果のコードを実装します
  • JS 右下隅広告ウィンドウコード (縮小、拡大、閉じることができます)
  • jsは、ウェブサイトの上部で閉じることができるフローティング広告バーコードを実装します
  • JSはクリックして展開したり閉じたりできる左側の広告コードを実装します
  • 広告の終了と表示効果を実現する JavaScript の例
  • jsを使用して次のマウスの動きを実現し、画像広告の例を閉じる
  • Javascript は閉じるボタン付きの Web ページのフローティング広告コードを実装します
  • ブロックを防ぐためにIEが閉じられたときにjsポップアップ広告コードを表示します

<<:  Centos で MySQL パスワードを変更する方法

>>:  MAC での MYSQL5.7.17 接続失敗の問題と解決策

推薦する

Linux lsof コマンドの使用方法の詳細な説明

lsof (開いているファイルのリスト) は、プロセスによって開かれたファイルを表示するツールです。...

Docker で Docker0 ブリッジのデフォルトのネットワーク セグメントを変更する方法

1. 背景Docker サービスが開始されると、デフォルトで docker0 ブリッジが作成され (...

MySQL グリーンバージョン設定コードと 1067 エラーの詳細

MySQL グリーンバージョン設定コードと 1067 エラーMySQL エンコーディングを表示 &#...

Nginx 仮想ホスト (IP ベース) を構成する 3 つの方法の詳細な説明

Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮想...

クールなバーコードエフェクトの作り方を教えます

声明:この記事では、Web ページ制作技術を使用して問題を包括的に解決するという考え方を反映して、W...

CentOS 7 でソースコードから Openssh をインストールする方法

環境: CentOS 7.1.1503 最小インストール依存パッケージをダウンロードします: yum...

vueの実践的な応用におけるvuexの永続性の詳細な説明

目次vuex 永続性要約するvuex 永続性vuex: ブラウザを更新すると、vuexの状態は初期状...

カルーセルバナーの自動回転効果を実現する純粋な CSS

さっそくコードを見てみましょう * { マージン: 0; パディング: 0; } 。容器 { マージ...

MySQL 8.0 で列を素早く追加する方法

序文: MySQL 8.0 では高速な列追加がサポートされ、数秒で大きなテーブルにフィールドを追加で...

新しい CSS :where および :is 疑似クラス関数とは何ですか?

:is と :where とは何ですか? :is()と:where()は、セレクターを作成するとき...

UbuntuのVimにNERDTreeプラグインをインストールする詳細な手順

NERDTree は Vim 用のファイル システム ブラウザーです。このプラグインを使用すると、ユ...

40以上の美しいWebフォームデザイン例

Web フォームは、訪問者と Web サイト所有者間の主要なコミュニケーション チャネルです。フィー...

MySQLインデックスの基礎となるデータ構造の詳細

目次1. インデックスの種類1. B+ツリー2. MyISAM と InnoDB の B+ ツリー ...

MySQL公式エクスポートツールmysqlpumpの使用

目次導入説明書実際の経験長所と短所総括する導入mysqlpump は mysqldump の派生です...

MySQLの数値型自動増分における落とし穴

テーブル構造を設計する場合、数値型は最も一般的な型の 1 つですが、数値型をうまく使用するのは想像す...