ネイティブJavaScriptでスキニングを実装するための具体的なコードは参考までに。具体的な内容は以下のとおりです。 原理 クリックイベントを通じて、クリックされた画像の情報を取得し、HTML背景画像のパスを変更します。 CSS スタイル <スタイル> 体{ マージン:0; パディング:0; 背景:url(img/1.jpg) 繰り返しなし; 背景サイズ:100% 100%; } #箱{ 幅:100%; 高さ:130px; 背景:#999999; } #ボックス ul{ マージン:0; パディング:0; リストスタイル:なし; } #ボックス ul li li、#ボックス ul li img{ 幅:180ピクセル; 高さ:120px; フロート:左; マージン:5px 60px; } </スタイル> HTMLソースコード <body id="本文"> <div id="ボックス"> <ul> <li><img src="img/1.jpg" /></li> <li><img src="img/2.jpg" /></li> <li><img src="img/3.jpg" /></li> <li><img src="img/4.jpg" /></li> <li><img src="img/5.jpg" /></li> </ul> </div> </本文> JavaScript ソースコード <スクリプト> var oBody = document.getElementById('Body'); var oImg = document.getElementsByTagName('img'); (var i=0;i<oImg.length;i++) の場合 { var oImgA=oImg[i]; oImgA.index=i+1; oImgA.onclick=関数(){ //コンソールログ(これ); oBody.style.background='url(img/'+this.index+'.jpg) 繰り返しなし'; oBody.style.backgroundSize = '100% 100%'; }; } </スクリプト> レンダリング クリックして切り替える ソースコード <!DOCTYPE> <html lang="ja"> <ヘッド> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" /> <title>スキンの変更</title> <スタイル> 体{ マージン:0; パディング:0; 背景:url(img/1.jpg) 繰り返しなし; 背景サイズ:100% 100%; } #箱{ 幅:100%; 高さ:130px; 背景:#999999; } #ボックス ul{ マージン:0; パディング:0; リストスタイル:なし; } #ボックス ul li li、#ボックス ul li img{ 幅:180ピクセル; 高さ:120px; フロート:左; マージン:5px 60px; } </スタイル> </head> <body id="本文"> <div id="ボックス"> <ul> <li><img src="img/1.jpg" /></li> <li><img src="img/2.jpg" /></li> <li><img src="img/3.jpg" /></li> <li><img src="img/4.jpg" /></li> <li><img src="img/5.jpg" /></li> </ul> </div> </本文> </html> <スクリプト> var oBody = document.getElementById('Body'); var oImg = document.getElementsByTagName('img'); (var i=0;i<oImg.length;i++) の場合 { var oImgA=oImg[i]; oImgA.index=i+1; oImgA.onclick=関数(){ //コンソールログ(これ); oBody.style.background='url(img/'+this.index+'.jpg) 繰り返しなし'; oBody.style.backgroundSize = '100% 100%'; }; } </スクリプト> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Nginx でファイル ホットリンク保護サービスを構築する方法を学ぶ例
>>: MySQLクライアント認証後の接続失敗の問題に対する完璧なソリューション
背景グラデーションと自動フルスクリーンに関する CSS の問題編集長は CSS の開発中に致命的な問...
Vue におけるストアの最も単純な応用はグローバル ストレージです。ここでは、相互にジャンプするため...
この記事では、ネイティブ JS で実装されたドラッグ可能なログイン ボックスを紹介します。その効果は...
この記事では、Webオンラインチャットを実装するためのVueの具体的なコードを参考までに紹介します。...
ソングティ: SimSun太字: SimHeiマイクロソフト YaHei: マイクロソフト YaHe...
1.オーバーフローコンテンツのオーバーフロー設定(設定されたオブジェクトにスクロールバーを表示するか...
目次charとvarcharの違いcharとvarcharの違い上記は、MySQL における cha...
私は熟練した DBA になるつもりはありませんが、MySQL を最適化するときは、いくつかの構成を調...
この記事は Linux centos8 をベースにして、docker をインストールし、イメージをプ...
非常に便利な機能group_concat() について、マニュアルには次のように記載されています: ...
span タグは HTML ウェブページを作成するときによく使用されますが、このタグの使い方がよくわ...
LNMPのようなアーキテクチャを持つウェブサイトは、一般的にPHPフレームワークに基づいて開発されて...
この記事では、ウェブ計算機のマインスイーパゲームを実装するためのJavaScriptの具体的なコード...
【コンテンツ】: 1.背景画像のグラデーションスタイルを使用する2. スケールを使ってズームできる...
目次MySQL 8 の隠しインデックス、降順インデックス、関数インデックス1. 隠しインデックス1....