欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)模擬購(gòu)物商城案例

 更新時(shí)間:2021年05月18日 15:40:24   作者:一號(hào)程序猿  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)模擬購(gòu)物商城案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

學(xué)習(xí)HTML,css和js前端的小伙伴們,這次來分享購(gòu)物商城案例的實(shí)現(xiàn)!

準(zhǔn)備階段:

準(zhǔn)備一些需要放到頁面上的圖片,小圖和其對(duì)應(yīng)的大圖,博主這邊舉例為小圖(40 x 40),大圖(321 x 430)。

結(jié)構(gòu)分析:

  • 大圖區(qū)域
  • 小圖區(qū)域
  • 整體邊框區(qū)域

效果分析:

  • 鼠標(biāo)放在小圖片上大圖會(huì)對(duì)應(yīng)顯示。
  • 鼠標(biāo)放在小圖片上面會(huì)有對(duì)應(yīng)效果。
  • 鼠標(biāo)移出時(shí)小邊框?qū)?yīng)效果消失。

使用css對(duì)邊框進(jìn)行設(shè)置:

對(duì)div標(biāo)簽進(jìn)行設(shè)置(對(duì)邊框?qū)傩赃M(jìn)行設(shè)置):

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

對(duì)table標(biāo)簽進(jìn)行設(shè)置(不需要邊框,且離頂部有一定的距離):

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

使用js對(duì)頁面動(dòng)態(tài)效果進(jìn)行設(shè)置:

鼠標(biāo)進(jìn)入的函數(shù):

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

鼠標(biāo)移出函數(shù):

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

整體代碼實(shí)現(xiàn):

<!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>
        //創(chuàng)建函數(shù)進(jìn)行照片的聯(lián)動(dòng)和樣式設(shè)置
        function operInImg(img,src){
            //設(shè)置圖片的樣式
            img.style.border="solid 1px blue";
            //設(shè)置大圖的img路徑
                //獲取大圖路徑
                var big = document.getElementById("big");
                //設(shè)置路徑
                big.src=src;               
        }
        function operOutImg(img){
            //設(shè)置圖片的樣式
            img.style.border="";
        }


    </script>

    <!---聲明css代碼域-->
    <style>
        /*設(shè)置div樣式*/
        #showdiv{
            width: 342px;
            height: 505px;
            border: solid 1px ;
            border-radius: 10px;
        }
        /*設(shè)置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=""  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>

實(shí)現(xiàn)效果:

感謝您的閱讀,不足之處歡迎指正!

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論