スキニングを実現するネイティブJavaScript

ネイティブ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 を応援していただければ幸いです。

以下もご興味があるかもしれません: