29.项目 1-博客前端：封装库--滑动导航

学习要点：

1.问题所在
2.设置代码

本节课，我们要制作一个博客的导航功能，希望导航有滑动的特效

一．问题所在

1.导航层次问题。
2.移入移出问题。
3.IE 的 bug 问题。

QQ截图20190516094531.png

二．设置代码

//HTML 部分
<div id="nav">
<ul class="about"> //专用于移入移出，别勉丢失
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="black">
<li>首页</li>
<li>博文列表</li>
<li>精彩相册</li>
<li>动感音乐</li>
<li>关于我</li>
</ul>
<div class="nav_bg">
<ul class="white">
<li>首页</li>
<li>博文列表</li>
<li>精彩相册</li>
<li>动感音乐</li>
<li>关于我</li>
</ul>
</div>
</div>

//CSS 部分
#nav {
width:465px;
height:52px;
background:url(images/nav_bg.png) no-repeat;
margin:50px auto 0 auto;
position:relative;
cursor:pointer;
}
#nav ul {
height:52px;
cursor:pointer;
}
#nav ul li {
float:left;
width:85px;
height:52px;
line-height:52px;
cursor:pointer;
text-align:center;
font-weight:bold;
}
#nav ul.black {
position:absolute;
left:20px;
z-index:1;
color:#333;
}
#nav ul.white {
width:425px;
position:absolute;
left:0px;
z-index:3;
color:#fff;
}
#nav ul.about {
position:absolute;
left:20px;
z-index:4;
cursor:pointer;
background:red;
opacity:0;
filter:alpha(opacity=0);
}
#nav div.nav_bg {
width:85px;
height:52px;
background:url(images/nav_over.png) no-repeat 0px 11px;
position:absolute;
left:20px;
overflow:hidden;
cursor:pointer;
z-index:2;
}

//滑动导航
$('#nav .about li').hover(function () {
var target = $(this).first().offsetLeft;
$('#nav .nav_bg').animate({
attr : 'x',
target : target + 20,
t : 30,
step : 10,
fn : function () {
$('#nav .white').animate({
attr : 'x',
target : -target
});
}
});
}, function () {
$('#nav .nav_bg').animate({
attr : 'x',
target : 20,
t : 30,
step : 10,
fn : function () {
$('#nav .white').animate({
attr : 'x',
target : 0
});
}
});
});

感谢收看本次教程！