jquery仿京东侧边栏导航效果

2019-11-19 17:21:07

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了jquery仿京东侧边栏导航的具体代码，供大家参考，具体内容如下

样式代码

<style>  *{   padding: 0;   margin: 0;   border: 0;  } body{  height: 2000px; } .right_ng{  width: 40px;  height: 100%;  position: absolute;  position: fixed;  right: 0px;  background: #666666; } .sign{  width: 40px;  height: 40px;   margin-top:280%; } .sign_top{  margin-top: 10px; } .sign_add_height{  height: 140px;  background: #888888;  color: #ffffff;  font-size: 13px;  list-style: none;  font-weight: bold; } .sign_add_height ul{  margin-top: 6px;  cursor: pointer; } .sign_add_height ul li{  list-style-type: none;  width: 20px;  height: 20px;  margin-top: 5px; } .buy{  width: 20px;  height: 20px;  border-radius: 10px 10px;  background:#666; } .sign_QR{  margin-top: 200%;  position: absolute;  bottom: 50px;  position: fixed;  background: #666666; } .sign_end{ position: absolute; bottom: 0px; position: fixed; background: #666666; } .sign img{  width: 22px;  height: 22px;  margin-top: 10px;  cursor: pointer; } .run_sign{  width: 100px;  height: 40px;  margin-left: -100px;  margin-top: -35px;  background: #666666;  color: #1afa29;  font-size: 13px;  line-height: 40px;   cursor: pointer; } .run_QR{  height: 250px;  width: 200px;  margin-left: -200px;  margin-top: -245px; } .sign_float{  position: fixed; } </style>

jQuery代码

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

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

<script>     $(function(){  $('.run_sign').css('display','none');  $(".run_QR img").attr("src","img/17.png");      for(var i=0;i<8;i++){    if(i==6){    $('.sign').eq(i).hover(function(){   $(this).css('background','#ea68a2').find('.img_1').attr("src","img/15.png");        $(this).find('.run_sign').css('visibility','visible').stop().slideDown(200);},function(){        $(this).css('background','#666666').find('.img_1').attr("src","img/7.png");        $(this).find('.run_sign').css('visibility','visible').stop().slideUp(200);})}    else if(i==5){    $('.sign').eq(i).hover(function(){      $(this).css('background','#ea68a2').find('img').attr("src","img/14.png");},function(){        $(this).css('background','#888888').find('img').attr("src","img/6.png");})}    else{      $('.sign').eq(i).hover(function(){   var b=$(this).index();         $(this).css('background','#ea68a2').find('img').attr("src","img/"+(b+9)+".png");         $(this).find('.run_sign').css('visibility','visible').stop().slideDown(200);},function(){   var b=$(this).index();         $(this).css('background','#666666').find('img').attr("src","img/"+(b+1)+".png");         $(this).find('.run_sign').css('visibility','visible').stop().slideUp(200);})}} });</script>

布局代码

<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>

效果图：