js實現模擬購物商城案例

阿新 • • 發佈：2021-05-20

學習HTML，css和js前端的小夥伴們，這次來分享購物商城案例的實現！

準備階段：

準備一些需要放到頁面上的圖片，小圖和其對應的大圖，博主這邊舉例為小圖(40 x 40),大圖(321 x 430)。

結構分析：

大圖區域
小圖區域
整體邊框區域

效果分析：

滑鼠放在小圖片上大圖會對應顯示。
滑鼠放在小圖片上面會有對應效果。
滑鼠移出時小邊框對應效果消失。

使用css對邊框進行設定：

對div標籤進行設定（對邊框屬性進行設定）：

#showdiv{
         width: 342px;
         height: 505px;
         border: solid 1px ;
         border-radius: 10px;
     }

對table標籤進行設定（不需要邊框，且離頂部有一定的距離）：

#ta{
          margin: auto;
          margin-top: 5px;
      }

使用js對頁面動態效果進行設定：

滑鼠進入的函式：

function operInImg(img,src){
          //設定圖片的樣式
          img.style.border="solid 1px blue";
          //設定大圖的img路徑
              //獲取大圖路徑
              var big = document.getElementById("big");
              //設定路徑
              big.src=src;               
      }
      function operOutImg(img){
          //設定圖片的樣式
          img.style.border="";
      }

滑鼠移出函式：

function operOutImg(img){
          //設定圖片的樣式
          img.style.border="";
      }

整體程式碼實現：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!--宣告js程式碼域-->
    <script>
        //建立函式進行照片的聯動和樣式設定
        function operInImg(img,src){
            //設定圖片的樣式
            img.style.border="solid 1px blue";
            //設定大圖的img路徑
                //獲取大圖路徑
                var big = document.getElementById("big");
                //設定路徑
                big.src=src;               
        }
        function operOutImg(img){
            //設定圖片的樣式
            img.style.border="";
        }


    </script>

    <!---宣告css程式碼域-->
    <style>
        /*設定div樣式*/
        #showdiv{
            width: 342px;
            heiGNHEi 
ght: 505www.cppcns.compx;
            border: solid 1px ;
            border-radius: 10px;
        }
        /*設定table樣式*/
        #ta{
            margin: auto;
            margin-top: 5px;
        }

    </style>
    <title>taobao</title>
</head>
<body>
     <div id="showdiv">
         <table width ="332px" height = "440px" id="ta">
             <tr height="300px">
                 <td colspan="5"><img src="./images/demo-big.jpg" alt="js實現模擬購物商城案例"  id="big"></td&程式設計客棧gt;
             </tr>
             <tr height="40px">
                 <td><img src="./images/demo01.jpg" alt="js實現模擬購物商城案例" onmouseover="operInImg(this,'./images/demo-big01.jpg')" onmouseout="operOutImg(this)"></td>
                 <td><img src="./images/demo02.jpg" alt="js實現模擬購物商城案例" onmouseover="operInImg(this,'./images/demo-big02.jpg')" onmouseout="operOutImg(this)"> </td>
                 <td><img src="./images/demo03.jpg" alt="j程式設計客棧s實現模擬購物商城案例" onmouseover="operInImg(this,'./images/demo-big03.jpg')" onmouseout="operOutImg(this)"> </td>
                 <td><img src="./images/demo04.jpg" alt="js實現模擬購物商城案例" onmouseover="operInImg(this,'./images/demo-big04.jpg')" onmouseout="operOutIm程式設計客棧g(this)"> </td>
                 <td><img src="./images/demo05.jpg" alt="js實現模擬購物商城案例" onmouseover="operInImg(this,'./images/demo-big05.jpg')" onmouseout="operOutImg(this)"> </td>
             </tr>
         </table>
     </div>
</body>
</html>

實現效果：

js實現模擬購物商城案例