仿京东边栏导航

╰+哭是因爲堅強的太久メ 2022-07-14 15:49 133阅读 0赞

![这里写图片描述][SouthEast]

--------------------

样式代码

jQuery代码  
这里把图片的名称换成数字的，每一个图标都有两个图片， 一个白色和一个绿色的，当鼠标移动到其中一个图标处时，改变其图片使其变色，因为一共有八个图标，所以总共有16张图片。因此图片名改变为当前图片名称数字+8。

这里用的动态是slideDown与slideUp。需要注意的是要设置索引来寻找但前对象的位置（因为是在for循环里有了索引才能找到当前对象的图片的数字名称）。

布局代码

<body>
        <div class="right_ng">
         <div class="sign">
             <center>
                <img src="img/1.png" />
             </center>      
            <div class="run_sign">
             <center>
                <span><b>我的订单</b></span>
             </center>
          </div>
        </div>   
    
        <div class="sign sign_top">
              <center>
                <img src="img/2.png" />
              </center>     
          <div class="run_sign">
              <center>
                <span><b>我的收藏</b></span>
              </center>
          </div>
        </div>    
             <div class="sign sign_top">
                <center>
                    <img src="img/3.png" />
                </center>       
                <div class="run_sign">
                    <center>
                     <span><b>我的优惠券</b></span>
                    </center>
                 </div>
             </div>    
                <div class="sign sign_top">
                <center>
                    <img src="img/4.png" />
                </center>       
                    <div class="run_sign">
                     <center>
                        <span><b>我的足迹</b></span>
                     </center>
                     </div>
                </div>    
                       <div class="sign sign_top">
                <center>
                    <img src="img/5.png" />
                </center>       
                    <div class="run_sign">
                        <center>
                            <span><b>我的JImu</b></span>
                         </center>
                      </div>
                   </div>
    
         <div class="sign sign_top sign_add_height">
                <center>
                    <img src="img/6.png" />
                    <ul>
                        <li>购</li>
                        <li>物</li>
                        <li>车</li>
                        <li class="buy">0</li>
                    </ul>
                </center>                           
        </div>    
            <div class="sign sign_top sign_QR">
                <center>
                    <img class="img_1" src="img/7.png" />
                </center>       
              <div class="run_sign run_QR">
                 <center>
              <img class="img_2" src="img/17.png" style="width: 160px;height: 170px;">
                <br />微信扫码享优惠
                 </center>
              </div>
             </div>
    
         <div class="sign sign_top sign_end">
                <center>
                    <img src="img/8.png" />
                </center>       
            <div class="run_sign">
                 <center>
                        <span><b>加关注</b></span>
                 </center>
             </div>
        </div>                           
     </div>
    </body>

--------------------

[SouthEast]: /images/20220709/a63a701c459d4af1a9d880ec9cf6ce14.png