jquery仿京东侧边栏导航效果
编程学习 2021-07-04 19:20www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了jquery仿京东侧边栏导航效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。