jquery实现网站导航动画滑动效果

<! DOCTYPE   html   PUBLIC   "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd"   >

< html >

< head >

< meta   http-equiv = "Content-Type"   content = "text/html; charset=UTF-8" >

< title >   Insert title here </ title   >

< script   type = "text/javascript"   src = "http://www.haodou.com/public/js/jquery-1.5.1.min.js"   ></ script >

< style   type = "text/css"   >

         ul,   li   {   margin   :   0 ;   padding :   0 ;}

         .clear {   clear   :   both ;}

         #nav_ul {   width   :   800px ;   height : 40px ;   background : url(http://www.haodou.com/public/images/public/group/5.jpg) left top no-repeat ; }

         #nav_ul li   {   width :   100px   ;   height   :   40px ;   display :   block ;   float   :   left ;}

         #nav_ul .active {   width :   100px   ;   height   :   40px ;   background : url(http://www.haodou.com/public/images/public/group/5.jpg) left top no-repeat ;}

</ style >

</ head >

< body >

< div >

         < ul   id =   "nav_ul" >

               < li ><   a   href   = "http://www.temi.com.cn" >   特米首页 </ a   ></ li >

               < li ><   a   href   = "http://shop.temi.com.cn" >   商城导航 </ a   ></ li >

               < li ><   a   href   = "http://brand.temi.com.cn" >   品牌导航 </ a   ></ li >

               < li ><   a   target   = "_blank"   href = "http://tuan.temi.com.cn"   > 团购导航 </   a ></ li   >

               < li ><   a   href   = "http://dianpu.temi.com.cn" >   淘宝店铺 </ a   ></ li >

               < li ><   a   href   = "http://taobao.temi.com.cn" >   淘宝商品 </ a   ></ li >

               < li ><   a   href   = "http://re.temi.com.cn" >   淘宝热卖 </ a   ></ li >

               < li ><   a   href   = "#" >   导购资讯 </ a   ></ li >

         </ ul >

         < div   class = "clear"   ></ div >

</ div >

< script   type = "text/javascript"   >

      $(document).ready(   function   (){

               var   arr_sub_domain =   new   Array( "www" ,   "shop" ,   "brand"   ,   "tuan" ,   "dianpu"   ,   "taobao"   ,   "re"   ,   "info"   )

               var   str_sub_domain = location.href.split( "//"   )[1].split( "." )[0];

            

               var   lock =   false ;

               var   nav_ul = $( "#nav_ul"   );

            nav_ul.children().each(   function   (i){

                     var   _this = $( this );

                  

                     //绑定mouseover事件的动态效果

                  _this.bind(   "mouseover" ,   function   (){

                        nav_ul.animate(

                              {backgroundPosition: i*100},

                              {duration:1000, queue:   false }

                        );

                  });

                  

                     //导航当前页设置样式

                  if   (! lock  &&   arr_sub_domain[i] == str_sub_domain) {

                        _this.addClass(   "nav_active" );

                        _this.css(   "background-position" , i*100);

                        flag =   true ;

                  }

            });

      });

</ script >

</ body >

</ html >

123宝贝网(www.123baby.net)