特米团购导航：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)