<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>导航滑动跟随效果</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style>
*{
margin:0px;
padding:0px;
}
body {
font-size:12px;
min-width:1200px;
}
fieldset,img {
border:none;
}
input,select,textarea {
font-family:"Microsoft Yahei",Arial,Helvetica,sans-serif;
font-size:100%;
outline:none;
}
li{
list-style:none;
font-style:normal;
}
table {
border-collapse:collapse;
border-spacing:0;
}
.nav {
height:60px;
background:#dca3a3;
position:relative;
}
.nav li {
float:left;
height:60px;
}
.nav li a {
display:block;
height:60px;
line-height:60px;
padding:0 20px;
min-width:100px;
text-align:center;
font-size:16px;
color:#fff;
position:relative;
z-index:10px;
text-decoration:none;
}
.nav li a:hover {
text-decoration:none;
}
.gl {
position:absolute;
top:0;
left:0;
height:60px;
background:#00bc12;
z-index:9px;
width:140px;
}
</style>
</head>
<body>
<div class="w_1200" style="padding:0 0 100px 0;position:relative;">
<div class="nav">
<div class="gl"></div>
<ul>
<li><a href="###">首页</a></li>
<li><a href="###">我是导航一</a></li>
<li><a href="###">我是导航二</a></li>
<li><a href="###">我是导航三</a></li>
<li><a href="###">我是导航四</a></li>
<li><a href="###">我是导航五</a></li>
<li><a href="###">我是导航六</a></li>
</ul>
</div>
</div>
<script>
$(".nav ul a").each(function() {
var hover_a = $(this);
var hover_awidth = $(this).innerWidth();
var hover_aleft = hover_a.position().left;
$(this).mouseover(function() {
$(".gl").stop();
hover_awidth = $(this).innerWidth();
$(".gl").animate({
left: hover_aleft + "px",
width: hover_awidth + "px"
}, 250);
})
$(this).mouseout(function() {
$(".gl").stop();
if ($(this).parent().parent().find(".gl_hover").length > 0) {
var gl_hover_left = $(this).parent().parent().find(".gl_hover").position().left;
hover_awidth = $(this).parent().parent().find(".gl_hover").innerWidth();
$(".gl").animate({
left: gl_hover_left + "px",
width: hover_awidth + "px"
}, 250);
} else {
hover_awidth = $(".nav ul a:first").innerWidth();
$(".gl").animate({
left: "0px",
width: hover_awidth + "px"
}, 250);
}
})
})
$(".nav ul a").click(function() {
$(this).parent().siblings().removeClass("gl_hover");
$(this).parent().addClass("gl_hover");
})
</script>
</body>
</html>
