当前位置: 代码迷 >> Web前端 >> jquery兑现网站导航动画滑动效果
  详细解决方案

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

热度:706   发布时间:2012-11-26 11:48:49.0
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)
  相关解决方案