js to achieve simulated shopping mall case

Friends who are learning HTML, CSS and JS front-end, this time I will share the implementation of the shopping mall case!

Preparation stage:

Prepare some pictures that need to be put on the page, small pictures and their corresponding large pictures. The blogger uses small pictures (40 x 40) and large pictures (321 x 430) as examples.

Structural analysis:

Large image area
Thumbnail area
Overall border area

Effect analysis:

When you put the mouse on the small picture, the large picture will be displayed accordingly.
Placing the mouse on the small picture will have a corresponding effect.
When the mouse moves out, the corresponding effect of the small border disappears.

Use CSS to set the border:

Set the div tag (set the border attributes):

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

Set the table tag (no border is required and there is a certain distance from the top):

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

Use js to set the dynamic effects of the page:

Mouse enter function:

function operInImg(img,src){
          //Set the image style img.style.border="solid 1px blue";
          //Set the img path of the big image //Get the big image path var big = document.getElementById("big");
              //Set the path big.src=src;               
      }
      function operOutImg(img){
          //Set the image style img.style.border="";
      }

Mouse out function:

function operOutImg(img){
          //Set the image style img.style.border="";
      }

Overall code implementation:

<!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">
    <!--Declare js code domain-->
    <script>
        //Create a function to link and style photos function operInImg(img,src){
            //Set the image style img.style.border="solid 1px blue";
            //Set the img path of the big image //Get the big image path var big = document.getElementById("big");
                //Set the path big.src=src;               
        }
        function operOutImg(img){
            //Set the image style img.style.border="";
        }


    </script>

    <!---Declare CSS code domain-->
    <style>
        /*Set div style*/
        #showdiv{
            width: 342px;
            height: 505px;
            border: solid 1px ;
            border-radius: 10px;
        }
        /*Set table style*/
        #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="" id="big"></td>
             </tr>
             <tr height="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>
         </table>
     </div>
</body>
</html>

Result:

Thank you for reading, and welcome to point out any shortcomings!

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

js imitates Xiaomi official website picture carousel special effects
JavaScript imitates Xiaomi carousel effect
Shopping mall product countdown example based on javascript
JavaScript simulates the mall to implement the picture advertising carousel example code
JavaScript imitates the complete page implementation process of Xiaomi Mall official website

<<: MySQL 5.7.23 installation and configuration method graphic tutorial

>>: Detailed steps for Linux account file control management