ネイティブ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クライアント認証後の接続失敗の問題に対する完璧なソリューション
Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソフト...
目次1. はじめに2. 切り替え1. 開発および本番環境の設定ファイルを追加する2. 複数の環境をサ...
この記事では、centos7 環境でソース コードから mysql5.7.16 をインストールする方...
この記事の例では、複数のカウントダウンを同時に設定するためのVueの具体的なコードを参考までに共有し...
目次最初に要約: 🌲🌲 序文: 🍬🍬公開🍬🍬 🍬🍬グローバル🍬🍬 🍬🍬ボールボックス🍬🍬 🎉🎉🎉結論...
この記事では、Linux のユーザーとグループの管理によく使用されるコマンドをまとめます。ご参考まで...
Nginx では、URL のパス パラメータに基づいて、到達不可能なアップストリームに動的に転送する...
数日前、バスで仕事に行きました。バスのカードリーダーの実際の使用シーンを実際に見て、カードリーダーの...
序文長い間、MySQL のアプリケーションおよび学習環境は MySQL 5.6 以前のバージョンであ...
HTMLハイパーリンクaタグのhrefジャンプとonclickの実行関係htmlのaタグのhrefは...
DNSとはDNS の正式名称は Domain Name System で、ドメイン名解決システムを意...
序文最近、データベースのテーブルに 2 つのフィールドを追加しました。その後、ディスク容量不足のよう...
目次トピック分析する使用目的解決:コードは次のように実装されます。分析:配列とポインタ解決:コードは...
1. Webプロジェクトを作成したら、Tomcatを例にサーバーを構成する必要があります。 2. 実...
この記事の例では、WeChatアプレットの検索ボックス機能を実装するための具体的なコードを参考までに...