広告を閉じる効果を実現する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 接続失敗の問題と解決策
推薦する
HTML の色に関する参考資料
HTML では、色は 2 つの方法で表現されます。 1 つは、青の場合は blue のように色の名前...
ダイナミッククロックを実現するJS+CSS
この記事の例では、動的な時計を実装するためのJS + CSSの具体的なコードを参考までに共有していま...
MySQL でコミットされていないトランザクションを見つけるための SQL の例の簡単な分析
以前、「MySQL でコミットされていないトランザクション情報を検索する方法」というタイトルのブログ...
Xshell にショートカット コマンドを追加する方法
便利なターミナル エミュレーターである Xshell は、開発者がホスト サーバーをリモート管理する...
jQueryメソッド属性の詳細な説明
目次1. jQueryの紹介2. jQueryセレクター2.1 5つの基本セレクタ2.2 4種類の関...
JavaScriptはブラウザがIEかどうかを判定します
フロントエンド開発者としては、IEの落とし穴は避けて通れません。他のブラウザはいいのにIEは壊れてい...
LinuxはRsync+Inotifyを使用してローカルとリモートのデータのリアルタイム同期を実現します。
0x0 テスト環境本社本番サーバーと支社バックアップサーバーはリモートデータバックアップが必要です...
CSS セレクタの 4 つのカテゴリ: 基本、組み合わせ、属性、疑似クラス
セレクターとは何ですか?セレクターの役割は、セレクターを介して要素を見つけ、CSS スタイルを要素に...
JavaScript の条件付きアクセス属性と矢印関数の紹介
目次1. 条件付きアクセス属性2. アロー関数の紹介1. 条件付きアクセス属性?. は ES2020...
CentOS7 に MySQL データベースをインストールしてデバッグする詳細な手順 [例]
この例では、デバッグ用の MySQL データベースをダウンロードしてインストールする必要があります。...
mysql8.0.19 winx64バージョンのインストール問題を解決する
MySQL は、スウェーデンの会社 MySQL AB によって開発されたオープンソースの小規模なリレ...
MySQL オンラインリカバリ UNDO テーブルスペース 実戦記録
1 MySQL5.6 1.1 関連パラメータMySQL 5.6 では、innodb_undo_dir...
CSS3は背景画像にマスクを設定し、マスクスタイルの継承の問題を解決します。
多くの場合、透明度の設定やぼかしなど、写真の背景を加工する必要があります。 ただし、背景画像が配置さ...
Ubuntu環境でのSSHの詳細なインストールと使用
SSH は Secure Shell の略で、安全な伝送プロトコルです。Ubuntu クライアントは...
MySqlのインストールとログインの詳細な説明
LinuxにMySQLがすでにインストールされているかどうかを確認する sudo service m...