JavaScriptの服装アルバム切り替え効果(Taobao商品画像切り替えに似ています)、参考までに、具体的な内容は次のとおりです。 では、早速コードを見てみましょう。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> <スタイル タイプ="text/css"> #bigImg{ 幅: 200ピクセル; } *{ パディング: 0; マージン: 0; } ul{ リストスタイル: なし; /*オーバーフロー: 非表示;*/ } ul li{ フロート: 左; 幅: 46px; 高さ: 46px; 左マージン: 10px; 上マージン: 20px; 境界線: 2px 実線 #ffffff; } ul .アクティブ{ 境界線の色: 赤; } </スタイル> </head> <本文> <img src="img/cloth_01.jpg" id="bigImg"> <ul> <li class="active"> <a href=""> <img src="img/cloth_01.jpg" width=46 class="smallImg"> </a> </li> <li> <a href=""> <img src="img/cloth_02.jpg" width=46 class="smallImg"> </a> </li> <li> <a href=""> <img src="img/cloth_03.jpg" width=46 class="smallImg"> </a> </li> <li> <a href=""> <img src="img/cloth_04.jpg" width=46 class="smallImg"> </a> </li> <li> <a href=""> <img src="img/cloth_05.jpg" width=46 class="smallImg"> </a> </li> </ul> <!--JS 部分--> <script type="text/javascript"> // 1. イベント ソースを取得します。 var bigImg = document.getElementById("bigImg"); var smallImgs = document.getElementsByClassName("smallImg"); (var i=0;i<smallImgs.length;i++){ // 2. コレクションを走査し、各imgタグにイベントを追加します。smallImgs[i].onmouseover = function (){ // 3. イベントハンドラ // 3.1 各liタグにホバーする前に、すべてのliタグのクラス名を空の値に設定します for (var j=0;j<smallImgs.length;j++){ smallImgs[j].parentNode.parentNode.setAttribute("class",""); } // 3.2 大きな画像の src 属性値を変更します。var smallImgSrc = this.getAttribute("src"); bigImg.setAttribute("src",smallImgSrc); // 3.3 マウスが置かれている img タグの親タグにクラスを追加します。this.parentNode.parentNode.setAttribute("class","active"); } } </スクリプト> </本文> </html> 実装効果図: デフォルトでは最初の画像が選択されます (大きな画像はデフォルトで最初の画像です)。マウスを対応する画像の上に置くと、大きな画像がその画像に切り替わります。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux で MySQL に接続するときに発生するエラーを解決する方法: ユーザー 'root'@'localhost' へのアクセスが拒否されました (パスワードの使用: YES)
>>: Docker Compose を使用して nginx のロード バランシングを実装する方法
Shtml と asp は似ています。shtml という名前のファイルでは、asp の命令と同様に、...
Windows Server 2016 アクティベーション キーを皆さんと共有したいと思います。wi...
目次1. MySQLトリガーの作成: 1. MySQLトリガー作成構文: 2. MySQL作成構文の...
目次イベント駆動型とパブリッシュ・サブスクライブ型ブラウザの JavaScript ではイベント駆動...
a タグ疑似クラスの役割: 「:link」: 訪問されていないタグの状態。 「:visited」: ...
Nginx は、マスター プロセス (MasterProcess) と、同じ数のホスト CPU コア...
SVN は Subversion の略称で、ブランチ管理システムを使用して効率的に管理するオープンソ...
目次1. JavaScriptについて2. JavaScript イベントループ3. マクロタスクと...
この記事では、HTTP プロトコルのリファラーのメタデータ パラメータの提案について説明します。この...
404 を避けるべきだとどうして言えるのでしょうか? その理由は、ほとんどの 404 ページが粗雑す...
目次概要戦略パターンを使用しないフォーム検証戦略パターンを使用して最適化する戦略パターンの利点要約す...
目次1. Antデザインビュー1. 公式ウェブサイトアドレス2. 使い方3.電子書籍テーブルを表示す...
Vue データの双方向バインディング原則ですが、この方法には欠点があり、配列とオブジェクトの部分的な...
序文:多くのビジネス テーブルでは、歴史的またはパフォーマンス上の理由により、最初のパラダイムに違反...
関連する知識ポイント親コンポーネントから子コンポーネントに値を渡す子コンポーネントから親コンポーネン...