演示效果一：
演示效果二：
CSS:
/* 初始化 */
body,html{ padding:0; margin:0;}
a{ text-decoration:none; color:#FFF; font-weight:bold; font-size:14px;}
div,ul,li{ padding:0; margin:0;}
/* nav start */
#nav-div{
width:300px;
height:42px;
background:#1BA2E1;
margin:auto;
position:relative;
}
ul{
width:100%;
height:42px;
list-style:none;
cursor:pointer;
background: url(images/nav_on.png) no-repeat;
}
#nav-div ul li{
width:100px;
height:42px;
line-height:42px;
text-align:center;
margin:auto;
float:left;
color:#FFF;
cursor:pointer;
}
#nav-div ul li:hover a{
color: #FF6;
}
#liItemPaner{
width:100px;
height:40px;
background:#FC0;
position:absolute;
}/* nav end*/
JQUERY代码：
$(document).ready( function () {
var navLi = $("#nav-div ul li"), //触发移入、出的
navUl = $("#nav-div ul"), //跟随鼠标移动的元素
speed = 200; //过度时间
/*========== 一 ===========*/
//初始化默认值
function initialization(){
_this = navUl.find("li.on").index();//鼠标移出 默认为 0 否则 $(this);
//动画
navUl.stop().animate({backgroundPosition:navLi.width()*_this},speed);
}
//加载调用
initialization();
//移入事件
navLi.hover(function(){
_this = $(this).index(); //$(this) 相当 0、1、2、3.....
navUl.stop().animate({backgroundPosition:navLi.width()*_this},speed);
},function(){
initialization();
});
//移入事件 （移出不返回首页） 演示效果二
// navLi.mouseover( function () {
// var _this = navLi.index(this);
// navUl.stop().animate({
// backgroundPosition : navLi.width() * _this
// }, speed)
// });
})html代码部分：
<div id="nav" class="nav-side"> <div id="nav-div"> <ul> <li class="on"><a href="http://www.blogxuan.com/" >首页</a></li> <li><a href="http://www.blogxuan.com/">PHP</a></li> <li><a href="http://www.blogxuan.com/">HTML/CSS</a></li> <li><a href="http://www.blogxuan.com/">JS/JQUERY</a></li> </ul> </div> </div>
以上写法缺点：
栏目是用固定宽度写死了 width:100px; 如果写的用padding来做的导航name你需要用到下面的这个属性 outerWidth(true) //获取宽度 $.each() //遍历栏目个数以及每个宽度
玄玄 博客 http://www.blogxuan.com/
