広告を閉じる効果を実現する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 接続失敗の問題と解決策
推薦する
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 学習ノート グリッドシステム事例
序文前回の記事では、主にグリッドシステムの基本原理を学び、簡単なケースを通してその原理を実践しました...