jquery仿京东侧边栏导航效果

2020-05-18 09:00:17易采站长站整理

$(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" />