スキン効果を実現するJavaScript（背景の変更）
|
この記事では、スキン変更効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 スキン変更効果: 別の画像をクリックすると、対応するページの背景が変更されます 実装のアイデア1. 画像セットを定義し、各src属性に背景画像のパスを割り当てます。 コードサンプル
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>スキン効果</title>
<スタイル>
* {
マージン: 0;
パディング: 0;
ボックスのサイズ: 境界線ボックス;
}
体 {
背景: url(images/壁纸1.jpg) 繰り返しなし 中央 上;
背景サイズ: カバー;
}
。箱 {
オーバーフロー: 非表示;
幅: 610ピクセル;
マージン: 100px 自動;
背景色: #fff;
}
.box li {
幅: 25%;
高さ: 100px;
リストスタイル: なし;
フロート: 左;
カーソル: ポインタ;
境界線: 1px 実線 #fff;
}
画像 {
幅: 100%;
高さ: 100%;
}
</スタイル>
</head>
<本文>
<ul class="box">
<li><img src="images/壁纸1.jpg" alt=""></li>
<li><img src="images/壁纸2.jpg" alt=""></li>
<li><img src="images/壁纸3.jpg" alt=""></li>
<li><img src="images/壁纸4.jpg" alt=""></li>
</ul>
<スクリプト>
var pics = document.querySelector('.box').querySelectorAll('img');
console.log(写真);
(var i = 0; i < pics.length; i++) の場合 {
pics[i].onclick = 関数() {
コンソールにログ出力します。
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</スクリプト>
</本文>
</html>ページ効果
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
推薦する
JavaScriptにおける評価戦略の詳細な説明
目次それを覆う栗パラメータの受け渡し値渡し共同配送要約する拡張機能 - 遅延評価私は最近、JavaS...
MySQL インポートおよびエクスポートのバックアップの詳細
目次1. MySQLのバックアップタイプの詳細な説明1. バックアップがデータベースに与える影響に基...
Vue フロントエンド開発における keepAlive の使用方法の詳細な説明
目次序文keep-avlive フック関数keep-avliveはどのコンポーネントをキャッシュする...
React構成サブルーティングの実装
1. コンポーネント First.js にはサブコンポーネントがあります。 './Admin...
Centos6.9 インストール Mysql5.7.18 ステップ記録
インストール手順 rpm -ivh mysql-コミュニティ-共通-5.7.18-1.el7.x86...
Nginx 構成の実装 https
目次1: https証明書を準備する2: nginx sslモジュールを準備する3: SSL証明書を...
一般的なDockerコマンドの詳細な説明
1. ヘルプコマンド1. 現在のDockerバージョンを表示する docker バージョン2. イメ...
MySQL クイックデータ比較テクニック
MySQL の運用と保守において、R&D の同僚が 2 つの異なるインスタンスのデータを比較...
nginxフロー制御とアクセス制御の実装
nginx トラフィック制御レート制限は非常に便利ですが、Nginx では誤解され、誤って設定される...
MySQLデータベースのマスタースレーブレプリケーションの長い遅延に対する解決策
序文MySQL マスター スレーブ レプリケーションの遅延は、業界では長年の問題となっています。遅延...
JS初心者が配列を処理するための実践的な方法のまとめ
join() メソッド: 指定された区切り文字を使用して配列内のすべての要素を文字列に接続します。例...
nginxリバースプロキシによるセッション障害の問題の解決策
同僚から助けを求められました。バックエンド システムへのログインは成功したものの、システムには正常に...
Web2.0: 情報過多の原因と解決策
<br />情報の重複、情報過多、情報強迫、パーソナライズされたカスタマイズ、検索エンジ...
Firefox ブラウザでバックグラウンド ミュージックを再生するための究極のソリューション (Chrome マルチブラウザ対応)
FirefoxでBGMを再生するための推奨コードがテストに合格しました空のコントロールパネルを開いて...
js を使用してウォーターフォール効果を実現する
この記事の例では、滝の流れの効果を実現するためのjsの具体的なコードを参考までに共有しています。具体...