<!DOCTYPE html>
<html>
<head>
<title>跟随当前高亮移动的效果</title>
<style>
*{padding:0;margin:0; list-style:none;}
#header{padding-bottom:4px; position:relative; padding:0 30px;}
.logonav h1{float:left;}
#logonavul li{float:left;}
#logonavul li a{ padding:10px;display:block;}
.cur a{color:#F21664;}
.clr{zoom:1}
.clr:after{content:"\0020";display:block;height:0;overflow:hidden;clear:both}.l{float:left !important;display:inline}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
var g = $("#curbar");
$("li a", "#logonavul").add(".logonav h1 a").hover(function() { //为 集合元素 h1>a ul> a 绑定 houver事件
clearTimeout(g.data("timer")); // 清除动画
SETCUR(this)// 鼠标停留 触发 SERCUR事件 (滑动效果)
},
function() {
var l = g.data("timer"),
m =this;
if (l !==null) { // 判断 g 对象 data 数据 timer 为 null ?
g.data("timer", setTimeout(function() {
SETCUR($(".cur", ".logonav"), m) // 跟随效果回到 .logonav 下 含有.cur 元素的位置.
},
300))
}
}).click(function() { // 点击事件
$("li", "#logonavul").add(".logonav h1").removeClass("cur"); // 清除 .cur
$(this).parent().addClass('cur'); //为当前点击的 a 元素 父级增加 .cur 样式
//g.data("timer", null) // 设置 g.data 属性 timer 值为 null 点击停止
}).trigger("mouseleave"); // 模拟鼠标滑离
});
function SETCUR(e, g) { // 效果函数 e 目标位置 g 起始位置
var a = $(e),
d = $(g),
f = $("#curbar");
if (a.length) {
var c = a.outerWidth(), // 获取 当前鼠标 停留对象的 / 传入对象 的 总宽度
b = a.position().left; // 获取 当前鼠标 停留对象的 / 传入对象 的 左边的值
if (f.css("position") !=="absolute") { // 初始化
f.css({
position: "absolute",
height: 4,
bottom: 0,
overflow: "hidden",
backgroundColor: "#F21664",
width: 0,
left: b + c /2
})
}
f.stop().animate({ // 停止当前运动 并 动画到 width: c,left: b
width: c,
left: b
},
300)
} else { // 消失 效果
var c = d.outerWidth(),
b = d.position().left;
f.stop().animate({
width: 0,
left: b + c /2
},
300)
}
}
</script>
</head>
<body>
<div id="header">
<div class="logonav clr">
<h1><a title="NOYOBO" href="#">NOYOBO</a></h1>
<ul class="lkn" id="logonavul">
<li><a href="#">主页</a></li>
<li><a href="#">博文</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">留言</a></li>
</ul>
<div id="curbar"></div>
</div>
</div>
</body>
</html>
