スキニングを実現するネイティブ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クライアント認証後の接続失敗の問題に対する完璧なソリューション

推薦する

Docker がデータベースのデプロイに適さない 7 つの理由のまとめ

Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソフト...

Vue3 Vue CLI マルチ環境設定

目次1. はじめに2. 切り替え1. 開発および本番環境の設定ファイルを追加する2. 複数の環境をサ...

Centos7 環境でソースコードから mysql5.7.16 をインストールする方法の詳細な説明

この記事では、centos7 環境でソース コードから mysql5.7.16 をインストールする方...

Vueは複数のカウントダウンを同時に設定する機能を実装しています

この記事の例では、複数のカウントダウンを同時に設定するためのVueの具体的なコードを参考までに共有し...

Vue3 を使用してポップアップ コンポーネントをカプセル化するのは簡単ですか?

目次最初に要約: 🌲🌲 序文: 🍬🍬公開🍬🍬 🍬🍬グローバル🍬🍬 🍬🍬ボールボックス🍬🍬 🎉🎉🎉結論...

Linux のユーザーとグループ管理によく使われるコマンドの概要

この記事では、Linux のユーザーとグループの管理によく使用されるコマンドをまとめます。ご参考まで...

NginxはURLのパスに応じてアップストリームに動的に転送します

Nginx では、URL のパス パラメータに基づいて、到達不可能なアップストリームに動的に転送する...

デザイン協会: なぜ間違った場所を探したのですか?

数日前、バスで仕事に行きました。バスのカードリーダーの実際の使用シーンを実際に見て、カードリーダーの...

MySQL 5.7 でルートパスワードを忘れた後に変更する方法の詳細なチュートリアル

序文長い間、MySQL のアプリケーションおよび学習環境は MySQL 5.6 以前のバージョンであ...

HTMLハイパーリンクaタグのhrefジャンプとonclick間の実行順序の例

HTMLハイパーリンクaタグのhrefジャンプとonclickの実行関係htmlのaタグのhrefは...

Linux ドメイン ネーム サービス DNS 設定方法

DNSとはDNS の正式名称は Domain Name System で、ドメイン名解決システムを意...

Ubuntu でディスク容量不足により MySQL が起動しない場合の解決策

序文最近、データベースのテーブルに 2 つのフィールドを追加しました。その後、ディスク容量不足のよう...

JavaScript を使用して文字列内の最も繰り返しの多い文字を取得する方法

目次トピック分析する使用目的解決:コードは次のように実装されます。分析:配列とポインタ解決:コードは...

Tomcat サーバーの設定と Web プロジェクトの公開に関する IDEA グラフィック チュートリアル

1. Webプロジェクトを作成したら、Tomcatを例にサーバーを構成する必要があります。 2. 実...

WeChatアプレットが検索ボックス機能を実装

この記事の例では、WeChatアプレットの検索ボックス機能を実装するための具体的なコードを参考までに...