広告を閉じる効果を実現する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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Centos で MySQL パスワードを変更する方法
>>: MAC での MYSQL5.7.17 接続失敗の問題と解決策
推薦する
MySQLクエリのパフォーマンスに影響を与える大きなオフセットの理由と最適化の詳細な説明
序文MySQL クエリは select コマンドを使用し、limit および offset パラメー...
LinuxでSVNサーバーを構築する方法
1: SVNをインストールする yum インストール -y サブバージョン2. 倉庫を作る1: 倉庫...
Mysqlは日付範囲の抽出方法を指定します
データベースを操作する過程では、いくつかの指標を日付別にまとめたり、一定期間内の合計金額をカウントし...
MySQL トランザクション制御フローと ACID 特性
目次1. ACIDの特性トランザクション制御構文3. トランザクション同時実行例外1. ダーティリー...
フォーム入力ボックスに関するWebデザインのヒント
この記事では、Web デザインにおけるフォーム入力ボックスに関するヒントとコードをいくつか紹介します...
Vue2.x プロジェクトのパフォーマンス最適化のためのコード最適化の実装
目次1 v-ifとv-showの使用2. 計算と監視を区別する3 v-for トラバーサルでは、アイ...
MySQLはconnect_by_isleaf MySQLメソッドまたはストアドプロシージャに似た機能を実装します
最近、特に異常なビジネス需要があり、テーブルがあります テーブル「デモ」を作成します（ `id` i...
SecureCRT に基づくリモート Linux ホストへのファイルのアップロードとダウンロードのグラフィカルな手順
wget や curl ツールを使用して、Linux サーバーで大規模なネットワーク ファイルを直接...
SVN のインストールと基本操作 (グラフィック チュートリアル)
目次1. SVNとは何か2. SVNサーバーとクライアントの取得方法3. SVN ワークフローとアー...
nginx をコンパイルしてインストールした後、スムーズに nginx をアップグレードする方法
nginx をコンパイルしてインストールし、一定期間使用した後、現在のバージョンに脆弱性があることや...
Node.js のモジュール性、npm パッケージ マネージャーの説明
目次モジュール化の基本概念モジュール化とは何かモジュール分解の利点Node.js のモジュール性No...
MySql データ型チュートリアル例の詳細な説明
目次1. 概要2. MySQLデータ型の詳細な説明1) 文字列型2) 整数型3) 浮動小数点型4) ...
MySQLカスタム関数の簡単な使用例
この記事では、例を使用して MySQL カスタム関数の使用方法を説明します。ご参考までに、詳細は以下...
MySQL マスタースレーブ構築（複数のマスターと 1 つのスレーブ）の実装アイデアと手順
背景：最近、同社のプロジェクトは同時実行のプレッシャーに耐えられないようなので、最適化が差し迫ってい...
MySQLの暗黙的な変換について話す
作業の過程で、暗黙的な変換が発生するケースが数多くあります。暗黙的な変換は、クエリの速度低下を引き起...