<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>动画导航条</title>
<style type="text/css">
*{
padding: 0px;margin: 0px; font:15px normal "微软雅黑";
}
ul{
list-style-type: none;
border-bottom: 5px solid #FFA54F;
height:40px;
padding-left: 50px;
}
li a{
display: block;
float:left;
text-decoration: none;
color: #000;
padding: 5px 15px;
background-color: #dbdbdb;
text-align: center;
margin:10px 0px 0px 1px;
width:120px;
}
.cat-1 a,a:hover{
background-color: #FFA54F;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var aA=document.getElementsByTagName('a');
for(var i=0;i<aA.length;i++)
{
aA[i].onmouseover=function()
{
var This=this;
clearInterval(This.time);
This.time=setInterval(function()
{
This.style.width=This.offsetWidth+8+"px";
if(This.offsetWidth>=160)
{
clearInterval(This.time);
}
},30)
}
aA[i].onmouseout=function()
{
clearInterval(this.time);
var This=this;
this.time=setInterval(function()
{
This.style.width=This.offsetWidth-8+"px";
if(This.offsetWidth<=120)
{
This.style.width='120px';clearInterval(This.time);
}
},30)
}
}
}
</script>
</head>
<body>
<div>
<ul>
<li class="cat-1"><a href="#">首页</a></li>
<li class="cat-2"><a href="#">新闻快讯</a></li>
<li class="cat-3"><a href="#">产品展示</a></li>
<li class="cat-4"><a href="#">售后服务</a></li>
<li class="cat-5"><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>