広告を閉じる効果を実現する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 に JDK1.8 をインストールするための詳細なチュートリアル

1. 設置前の清掃 rpm -qa | grep jdk rpm -qa | grep gcj yu...

MySQLデータ損失のトラブルシューティング事例

目次序文現地調査ケースの再現要約する序文最近、友人が突然WeChatで連絡してきて、MySQLでデー...

reduxの動作原理と使い方の説明

目次1. redux とは何ですか? 2. 還元の原則3. redux の使い方は? (1)redu...

MySql インデックスの詳細な紹介と正しい使用方法

MySql インデックスの詳細な紹介と正しい使用方法1. はじめに:インデックスはクエリ速度に重大な...

Mysql で自動増分主キー ID を更新するときに問題が発生しました

目次自動インクリメント ID を更新する理由は何ですか?質問解決方法これは私が知っている問題ですが、...

Linux サーバーに Java Web プロジェクトをデプロイするための完全なチュートリアル

この記事は主にインターネット上の他のチュートリアルを参考にしています。実際に操作した上でのまとめです...

JavaScript でカウントダウン効果を実装する

カウントダウン効果を実現するにはJavascriptを使用します。参考までに、具体的な内容は次のとお...

Linux/Mac に MySQL をインストールするときにパスワードを忘れた場合の解決策

序文この記事では主に、Linux/Mac に MySQL をインストールするときにパスワードを忘れた...

オンライン MYSQL 同期エラーのトラブルシューティング方法の概要 (必読)

序文フェイルオーバーが発生した後、よくある問題は同期エラーです。データベースが小さい場合は、ダンプし...

IE6 スペースバグ修正方法

コードを見てみましょう:コードをコピーコードは次のとおりです。 < !DOCTYPE html...

Centos7環境でYUMを構築する方法

1. yumソースの設定ファイルを入力します 2.lsで設定ファイルを表示する 3. ディレクトリを...

vue+springbootでログイン認証コードを実現

この記事では、ログイン認証コードを実装するためのvue+springbootの具体的なコードを例とし...

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

参考までにWindowsにMySQLをインストールします。具体的な内容は次のとおりです。 1.まずM...

Nginx で WordPress 擬似静的を設定する方法の例

Baidu の擬似静的の説明を引用します。擬似静的は、実際の静的に相対的です。通常、検索エンジンの使...

Bootstrap 3.0 学習ノート グリッドシステム事例

序文前回の記事では、主にグリッドシステムの基本原理を学び、簡単なケースを通してその原理を実践しました...