スキン効果を実現する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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
推薦する
Ubuntu の空き容量を増やす 5 つの簡単な方法
序文ほとんどの人は、システム ディスク ストレージが少ないときにこの操作を実行するか、Linux シ...
MySQL でトリガーを無効化および有効化するチュートリアル [推奨]
MYSQL を使用する場合、トリガーがよく使用されますが、不適切な使用によって問題が発生する場合が...
Vue3 のウォッチの使用方法とベストプラクティスガイド
目次序文🌟 1. APIの紹介2. 複数のデータソースの監視3. リスニングアレイ4. 監視対象5....
VMware WorkStation を Docker for Windows で使用するための詳細なチュートリアル
目次1. はじめに2. Windows用Dockerをインストールする1. Windows用Dock...
jQuery は呼吸カルーセルを実装します
この記事では、ブレッシングカルーセルを実装するためのjQueryの具体的なコードを参考までに共有しま...
HTML ページの先頭に戻るいくつかの実装の概要
最近、ウェブサイトを開発する際にトップに戻るボタンを作成する必要がありますが、私は主にバックエンドの...
docker での psql データベースのバックアップとリカバリの詳細な説明
1. DockerでのPostgresデータベースのバックアップ注文： docker exec it...
ウェブページのカラーマッチングスキルについての簡単な説明（フロントエンド開発者必読）
一般的に、Web ページの背景色は、より柔らかく、よりシンプルで、より明るく、暗いテキストとマッチし...
CSS 表示属性のインラインブロックレイアウト実装の詳細な説明
CSS 表示プロパティ注: !DOCTYPE が指定されている場合、Internet Explore...
Linux での MySQL 5.6 バイナリのインストール プロセス
1.1 バイナリインストールパッケージをダウンロードするhttps://dev.mysql.com/...
ストリーマーボタンの効果を実現するCSS3アニメーション
CSS3 を学習する過程で、CSS3 属性を使用すると多くのクールな効果を簡単に実現できることが分か...
jQueryはシンプルなカルーセル効果を実装します
みなさんこんにちは。今日はカルーセルの実装についてお話しします。私が作成したカルーセルの効果は次のと...
Vueはブラウザ側のコードスキャン機能を実装します
背景少し前にブラウザカメラの取得とスキャンコード認識の機能を作りました。その際の知識ポイントと具体的...
ウェブデザインにおけるキーワード設計手法の紹介
多くの場合、ホームページを作成するときに、Web ページ ヘッダー属性の設定を無視します。 Web ...
Linux ファイアウォール設定の詳細な手順 (yum ウェアハウス設定に基づく)
序文この実験では、デバッグ用に2つの仮想マシン（CentOs6とRed Hat 6）を準備します。 ...