新学的炫酷特效,分享下,源代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>首页</title>
<style>
* {
padding: 0;
margin: 0
}
li {
list-style: none
}
a {
text-decoration: none;
}
.nav {
width: 100%;
height: 40px;
margin-top: 100px;
position: absolute;
background: #f6f6f6;
z-index: -2;
}
.nav_con {
width: 1000px;
height: 40px;
margin: 0 auto;
position: relative;
}
.nav_con li {
float: left;
}
.nav_con li a {
display: block;
padding: 0 30px;
line-height: 40px;
color: #333;
}
.nav_con li a:hover,
.nav_con li a.on {
color: #fff;
}
.nav_con .line {
width: 150px;
height: 40px;
background: #35b558;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
var li_width = $(".nav_con li a.on").outerWidth();
var li_left = $(".nav_con li a.on").position().left;
$(".nav_con .line").css({
width: li_width,
left: li_left
})
$(".nav_con li").hover(function() {
var li_width = $(this).outerWidth();
var li_left = $(this).position().left;
$(".nav_con .line").stop().animate({
width: li_width,
left: li_left
});
}, function() {
$(".nav_con .line").stop().animate({
width: li_width,
left: li_left
});
});
})
</script>
</head>
<body>
<div class="nav">
<div class="nav_con">
<ul class="list">
<li>
<a href="index.html" class="on">首页</a>
</li>
<li>
<a href="zhiye.html">职业课程</a>
</li>
<li>
<a href="jiuye.html">就业学习</a>
</li>
<li>
<a href="bbs.html">极客社区</a>
</li>
<li>
<a href="jike.html">极客+</a>
</li>
</ul>
<div class="line"></div>
</div>
</div>
</body>
</html>
原理:穿件一个line,绝对定位,然后通过jquery获取每个nav li的位置及宽度,进行相应的匹配即可。实现移动动画。