スキン効果を実現する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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
推薦する
React+TS を使用したシンプルな Jira プロジェクトを実装するためのベスト プラクティス
トレーニングのための一連のプロジェクト反応+ts内容は少ないですが、フックのカプセル化、ts ジェネ...
MySQL テーブル自動増分 ID オーバーフロー障害レビュー ソリューション
問題: MySQLテーブル内の自動増分IDのオーバーフローによりビジネスブロックが発生した背景： t...
MySQL 5.5.56 バージョン (バイナリ パッケージ インストール) カスタム インストール パス ステップ レコード
インストールパス: /application/mysql-5.5.56 1. 事前準備MySQL 依...
Html、sHtml、XHtml の違いのまとめ
たとえば、<u>には終了文字がなく、ブラウザはそれを認識します。 SHTML は Ser...
JavaScript 関数呼び出し、適用、バインド メソッドのケース スタディ
要約する1. 類似点どちらも、ターゲット関数が実行されると内部の this ポインターを変更できます...
Centos6.5 に zabbix2.4 をインストールするチュートリアル図
centos-DVD1バージョンシステムの固定IPアドレスは192.168.159.128で、cen...
MySQL シリーズ 9 MySQL クエリ キャッシュとインデックス
目次チュートリアルシリーズ1. MySQL アーキテクチャクエリキャッシュキャッシュされないクエリ:...
Dockerコンテナが起動直後に終了する問題を解決する
最近、Docker がコンテナの起動時に特定のプロセスを直接実行できるようにする方法を調べていたとこ...
MySQL における := と = の違いをグラフィカルに紹介
:= と = の違い=設定および更新の場合にのみ、:= と同じ効果、つまり代入効果があり、それ以外の...
フォームファイル選択ボックスのスタイルをカスタマイズする例
コードをコピーコードは次のとおりです。 <!DOCTYPE html> <html...
MySQLの詳細な分析で使用法と結果を説明します
序文日常業務では、実行に時間のかかる SQL ステートメントを記録するために、スロー クエリを実行す...
mysql 計算関数の詳細
目次2. フィールドの連結2. MySQL関数の例をいくつか挙げてください。 2.1 シンボル処理2...
2008 年の Web デザインにおける 10 の経験
<br />インターネットは絶えず変化しており、BusinessWeek.com は専門...
MySQLの整数および文字列インデックスの無効化または暗黙的な変換に関する簡単な説明
目次問題の概要問題の再現問題の拡大結論は問題の概要今日、仕事中に、DBA が突然、SQL に暗黙的な...
MySQL コール初心者が犯しがちな 11 の間違いのまとめ
序文セキュリティ部門からSQLインジェクションやXSS攻撃の脆弱性などに関する警告メールを頻繁に受け...