演示效果一:
演示效果二:
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/