js でショッピングモールのシミュレーションを実現

HTML、CSS、JSフロントエンドを学習中の皆さん、今回はショッピングモールの事例の実装をシェアします！

準備段階:

ページに配置する必要のある画像、小さい画像とそれに対応する大きい画像をいくつか用意します。ブロガーは、小さい画像 (40 x 40) と大きい画像 (321 x 430) を例として使用します。

構造解析:

大きな画像領域
サムネイルエリア
国境地域全体

効果分析:

小さい画像の上にマウスを置くと、それに応じて大きい画像が表示されます。
小さな画像の上にマウスを置くと、対応する効果が得られます。
マウスを外側に動かすと、小さな境界線の対応する効果が消えます。

CSS を使用して境界線を設定します。

div タグを設定します (境界属性を設定します)。

#表示div{
         幅: 342ピクセル;
         高さ: 505px;
         境界線: 実線 1px ;
         境界線の半径: 10px;
     }

テーブルタグを設定します (境界線は不要で、上部から一定の距離があります)。

#た{
          マージン: 自動;
          上マージン: 5px;
      }

js を使用してページの動的効果を設定します。

マウス入力機能:

関数operInImg(img,src){
          //画像スタイルを設定します img.style.border="solid 1px blue";
          // 大きな画像の img パスを設定します // 大きな画像のパスを取得します var big = document.getElementById("big");
              //パスを設定します big.src=src;               
      }
      関数operOutImg(img){
          //画像スタイルを設定します img.style.border="";
      }

マウスアウト機能:

関数operOutImg(img){
          //画像スタイルを設定します img.style.border="";
      }

全体的なコード実装:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <!--js コード ドメインを宣言します -->
    <スクリプト>
        //写真をリンクしてスタイルを設定する関数を作成する function operInImg(img,src){
            //画像スタイルを設定します img.style.border="solid 1px blue";
            // 大きな画像の img パスを設定します // 大きな画像のパスを取得します var big = document.getElementById("big");
                //パスを設定します big.src=src;               
        }
        関数operOutImg(img){
            //画像スタイルを設定します img.style.border="";
        }


    </スクリプト>

    <!---CSS コードドメインを宣言します-->
    <スタイル>
        /*div スタイルを設定する*/
        #表示div{
            幅: 342ピクセル;
            高さ: 505px;
            境界線: 実線 1px ;
            境界線の半径: 10px;
        }
        /*表のスタイルを設定する*/
        #た{
            マージン: 自動;
            上マージン: 5px;
        }

    </スタイル>
    <title>タオバオ</title>
</head>
<本文>
     <div id="showdiv">
         <テーブルの幅="332px" 高さ = "440px" id="ta">
             <tr 高さ="300px">
                 <td colspan="5"><img src="./images/demo-big.jpg" alt="" id="big"></td>
             </tr>
             <tr 高さ="40px">
                 <td><img src="./images/demo01.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big01.jpg')" onmouseout="operOutImg(this)"></td>
                 <td><img src="./images/demo02.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big02.jpg')" onmouseout="operOutImg(this)"> </td>
                 <td><img src="./images/demo03.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big03.jpg')" onmouseout="operOutImg(this)"> </td>
                 <td><img src="./images/demo04.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big04.jpg')" onmouseout="operOutImg(this)"> </td>
                 <td><img src="./images/demo05.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big05.jpg')" onmouseout="operOutImg(this)"> </td>
             </tr>
         </テーブル>
     </div>
</本文>
</html>

結果：