広告を閉じる効果を実現する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 接続失敗の問題と解決策
推薦する
Reactは動的ポップアップウィンドウコンポーネントを実装します
UI コンポーネントを作成するときに、アニメーションを考慮しなければ、アニメーションを実現するのは非...
vue3+vite プロジェクトで svg を使用する方法の詳細なグラフィック説明
今日、vue3+viteプロジェクトの実践で、svgを使用する場合、以前の記述方法が使用できないこと...
要素の円弧モーションを実現する CSS3 サンプルコード
CSS を使用して要素の円弧の動きを制御する方法CSS3 の新しい属性 transfrom トランジ...
JSでHTML本文のスタイルを変更する
目次1. 本来の定義2. JS操作、幅の変更を例に3. 効果: 幅が変更されました 1. 本来の定義...
MySQL killコマンドの実行原理の詳細な説明
目次キル命令実行原理命令実行特性クエリ実行の強制終了の原則接続終了の実装原則中断される可能性はありま...
ES9の新機能の詳細な説明: 非同期反復
目次非同期トラバーサル非同期反復可能トラバーサル非同期反復生成非同期メソッドと非同期ジェネレーター非...
Lua モジュールを使用して WAF を実装する Nginx の原理の分析
目次1. WAFの背景2. WAFとは3. 動作原理4. WAF機能5. WAFと従来のファイアウォ...
MySQL トリガーの紹介、トリガーの作成、使用制限の分析
この記事では、例を使用して、MySQL トリガーの概要、トリガーの作成方法、およびトリガーの使用上の...
3Dカルーセル効果を実現するjs
この記事では、3Dカルーセル効果をjsで実装するための具体的なコードを参考までに共有します。具体的な...
Vue2.xは、ユーザーのログインと終了を実装するためにルーティングナビゲーションガードを設定します。
目次序文1. ルーティングナビゲーションガードを設定する1. グローバルナビゲーションガード2. ロ...
VMware Workstation Pro は Win10 ピュア バージョンのオペレーティング システムをインストールします
この記事では、VMware Workstation Pro で Win10 オペレーティング システ...
div ボックス モデルの使用経験の概要
ボックスモデルの計算<br />マージン + ボーダー + パディング + コンテンツC...
ログインインターセプションを実装するためのVueルーティング
目次1. 概要2. ログインインターセプションを実装するためのルーティングナビゲーションガード1. ...
html-webpack-plugin の使用方法の詳細な説明
最近、React プロジェクトで初めてhtml-webapck-pluginプラグインを使用しました...
Linux viコマンドの知識ポイントと使い方のまとめ
Linux viコマンドの詳しい説明vi エディタは、すべての Unix および Linux システ...