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

スキニングを実現するネイティブ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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JSでスキン変更機能を実装する方法を詳しく解説
  • js Dom が肌の変化効果を実現
  • jQuery と jQuery.cookie.js プラグインを組み合わせてスキニング機能を実装する例
  • スキン変更機能を実装するJavaScript
  • jsを使用してWebページのスキニング機能を簡単に実装する
  • シンプルなウェブページのスキニング効果を実現する js
  • AngularJS ウェブサイトのスキニング例
  • js+css で簡単に Web ページのスキニング効果を実現
  • jsはページ全体のスタイルを動的に変更して、スキン変更効果を実現します。
  • スキン効果を実現するJavaScript(背景の変更)

<<:  Nginx でファイル ホットリンク保護サービスを構築する方法を学ぶ例

>>:  MySQLクライアント認証後の接続失敗の問題に対する完璧なソリューション

推薦する

背景のグラデーションと自動フルスクリーンを実現するCSSコード

背景グラデーションと自動フルスクリーンに関する CSS の問題編集長は CSS の開発中に致命的な問...

Vueのシンプルストアの詳しい説明

Vue におけるストアの最も単純な応用はグローバル ストレージです。ここでは、相互にジャンプするため...

ドラッグ可能なログインボックスを実現するネイティブJS

この記事では、ネイティブ JS で実装されたドラッグ可能なログイン ボックスを紹介します。その効果は...

Vue が Web オンラインチャット機能を実現

この記事では、Webオンラインチャットを実装するためのVueの具体的なコードを参考までに紹介します。...

CSS スタイルにおける中国語フォントのフォントファミリーに対応する英語名の詳細な説明

ソングティ: SimSun太字: SimHeiマイクロソフト YaHei: マイクロソフト YaHe...

HTML スクロールバーのテキストエリア属性の設定

1.オーバーフローコンテンツのオーバーフロー設定(設定されたオブジェクトにスクロールバーを表示するか...

面接官がmysqlのcharとvarcharの違いを尋ねたとき

目次charとvarcharの違いcharとvarcharの違い上記は、MySQL における cha...

3つの簡単な調整でMySQLを最適化する

私は熟練した DBA になるつもりはありませんが、MySQL を最適化するときは、いくつかの構成を調...

DockerにJava環境をインストールするための実装手順

この記事は Linux centos8 をベースにして、docker をインストールし、イメージをプ...

MySQLはgroup_concat()関数に基づいて複数のデータ行を結合します

非常に便利な機能group_concat() について、マニュアルには次のように記載されています: ...

インライン要素スパンの最小高さの定義

span タグは HTML ウェブページを作成するときによく使用されますが、このタグの使い方がよくわ...

Nginx サーバーで URL リンクを設定する方法

LNMPのようなアーキテクチャを持つウェブサイトは、一般的にPHPフレームワークに基づいて開発されて...

JavaScript ベースの Web 計算機の実装

この記事では、ウェブ計算機のマインスイーパゲームを実装するためのJavaScriptの具体的なコード...

CSS はモバイル互換性の問題を解決するために 0.5px の線を実装します (推奨)

【コンテンツ】: 1.背景画像のグラデーションスタイルを使用する2. スケールを使ってズームできる...

MySQL 8で追加された3つの新しいインデックスは、非表示、降順、関数です。

目次MySQL 8 の隠しインデックス、降順インデックス、関数インデックス1. 隠しインデックス1....