鼠标滑过遮罩跟随栏目的JQuery导航

2622

演示效果一:

演示效果二:

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>

以上写法缺点:

  1. 栏目是用固定宽度写死了 width:100px; 如果写的用padding来做的导航name你需要用到下面的这个属性 outerWidth(true) //获取宽度 $.each() //遍历栏目个数以及每个宽度

玄玄 博客 http://www.blogxuan.com/