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)