広告を閉じる効果を実現する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 接続失敗の問題と解決策
推薦する
JSは5つ星の賞賛効果を達成
JS を使用してオブジェクト指向メソッドを実装し、JD.com の 5 つ星レビュー効果を実現します...
サブクエリ最適化における MySQL 選択の実装
以下のデモはMySQLバージョン5.7.27に基づいています。 1. MySQLサブクエリ最適化戦略...
HTML マーキータグの使用例
このタグはHTML3.2の一部ではなく、MSIE3以降のカーネルのみをサポートしています。そのため、...
SQL インジェクション脆弱性プロセスの例と解決策
コード例: パブリッククラスJDBCDemo3 { パブリック静的voiddemo3_1(){ bo...
この記事ではJavaScriptの基本であるディープコピーとシャローコピーについて説明します。
目次浅いコピーディープコピー補充する要約するコピー（クローン、複製などとも呼ばれる）ですが、ディープ...
JDBC 探索 SQLException 分析
1. SQLExceptionの概要JDBC を使用してデータ ソース (この記事のデータ ソースは...
CSS スタイルの優先順位はどれくらい複雑ですか?
昨晩、面接の質問を見ていたら、CSS スタイルの優先順位について特に明確に説明していない人が何人かい...
Linuxでawkを使用する方法の詳細な説明
awk を学ぶ前に、sed、grep、tr、cut などのコマンドを学んでおく必要があります。これら...
データベース復旧エラーの原因となる MySQL 文字セットの簡単な分析
MySQL の文字セットエンコーディングが正しくないデータをインポートすると、エラーが表示されます。...
TypeScript 2.0 マーク付き共用体型の詳細な説明
目次タグ付きユニオン型を使用した支払い方法の構築タグ付きユニオン型を使用した Redux アクション...
SQL文でのgroup byの使用について簡単に説明します
1. 概要Group by は、by の後の規則に従ってデータをグループ化することを意味します。いわ...
スクロールバーを非表示にする HTML の簡単な実装
1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...
MySQLワームレプリケーションの基本知識
ワームは、その名前が示すように、自ら複製し、その数は倍増、つまり指数関数的に増加します。 MySQL...
Linux C バックグラウンドサービスプログラムの単一プロセス制御の実装
導入通常、バックグラウンド サーバー プログラムには 1 つのプロセスのみが必要ですが、単一のプロセ...
Deepin で virtualenv をインストールして使用するチュートリアル
virtualenv は、分離された Python 仮想環境を作成するためのツールです。独立したディ...