一个js导航效果

/**JavaScript Document
 2  * Func  : 仿Flash导航效果
 3  * Author: [purecolor@foxmail.com]
 4  */
 5 (function(init){
 6     var navmenu=_$('navbox').getElementsByTagName('li');
 7     for(var i=0,len=navmenu.length;i<len;i++){
 8         navmenu[i].onmouseover=function(){
 9             window.clearTimeout(window['stime']);
10             var size={},from=parseInt((_$('navbox').style.backgroundPosition).split(' ')[0]);
11             from=isNaN(from)?0:from;
12             size.from=from;
13             size.to=getAbsObjPoint(this)[0]-(Math.floor((127/2)) - Math.floor((this.offsetWidth/2)));
14             if(Math.abs(size.to-size.from)<1) return false;
15             //缓动效果
16             movebg(_$('navbox'),size,0.1,5);
17             //弹性效果
18             //movebgtween(_$('navbox'),size,0,0.8,0.8,20)
19         }
20         navmenu[i].onmouseout=function(){
21             goback();
22         }
23     }
24     //初始导航背景坐标
25     var goback=function (){
26         window.clearTimeout(window['stime']);
27         var size={},from=parseInt((_$('navbox').style.backgroundPosition).split(' ')[0]);
28         from=isNaN(from)?0:from;
29         size.from=from;
30         size.to=getAbsObjPoint(navmenu[init-1])[0]-(Math.floor((127/2)) - Math.floor((navmenu[init-1].offsetWidth/2)));
31         if(Math.abs(size.to-size.from)<1) return false;
32         //缓动效果
33         movebg(_$('navbox'),size,0.1,5);
34     };
35     goback();
36     
37     /**
38      *缓动效果
39      *params o:移动的对象,size:{from:开始坐标,to:目标坐标},easing:缓动系数,detay:帧频
40      *return anmia
41      */
42     function movebg(o,size,easing,detay){
43         window['stime']=window.setTimeout(function (){
44             //开始缓动
45             var speed=size.from;
46             speed +=(size.to-size.from)*easing;
47             o.style.backgroundPosition=speed+'px 0';
48             if (Math.abs((size.to-size.from)*easing)<1){
49                 o.style.backgroundPosition=size.to+'px 0';
50                 return false;
51             }
52             movebg(o,{from:speed,to:size.to},easing,detay);
53         },detay);
54     }
55     
56     /**
57      *弹性效果
58      *params o:移动的对象,size:{from:开始坐标,to:目标坐标},vx:初始加速度,spring:弹性系数,detay:帧频
59      *return anmia
60      */
61     function movebgtween(o,size,vx,spring,friction,detay){
62         window['stime']=window.setTimeout(function (){
63             //开始弹性运动
64             var speed=size.from;
65             vx+=(size.to-size.from)*spring;
66             speed +=(vx*=friction);
67             o.style.backgroundPosition=speed+'px 0';
68             if (Math.abs((size.to-size.from)*spring)<1){
69                 o.style.backgroundPosition=size.to+'px 0';
70                 return false;
71             }
72             movebgtween(o,{from:speed,to:size.to},vx,spring,friction,detay);
73         },detay);
74     }    
75 })(3);

注明：其中的 127 为背景图片的宽度，目的是实现背景在当前导航元素水平居中。

童鞋们里面没有_$方法哦，需要自己写哦。PS:不怕麻烦你可以替换为document.getElementById()的哦！

效果就是下面这样的：

附件素材：

//平铺的背景

//上面发光的那块

CSS样式：

#nav{background:url(../images/l-menu-bg.jpg) repeat-x; height:40px;}
#navbox{background-image:url(../images/l-menu-over-bg.png); background-repeat: no-repeat;}
#nav ul{height:40px;}
#nav li{float:left; display:block; line-height:40px; margin:0 5px; padding:0 5px; letter-spacing:0.25em; font-weight:bolder; cursor:pointer;}

HTML结构：

<div id="nav">
	<div id="navbox">
        <ul class="max_w">
            <li><a href="javascript:void(0);">通知公告</a></li>
            <li><a href="javascript:void(0);">文件中心</a></li>
            <li><a href="javascript:void(0);">十二五规划</a></li>
            <li><a href="javascript:void(0);">沿海开发</a></li>
            <li><a href="javascript:void(0);">公务员之家</a></li>
            <li><a href="javascript:void(0);">南通新闻</a></li>
            <li><a href="javascript:void(0);">一周热点</a></li>
            <li><a href="javascript:void(0);">部门信息</a></li>
        </ul>
    </div>
 </div>