<style>
*{ margin:0px; padding:0px;}
.naver{list-style-type: none; width:700px; overflow:hidden; margin:100px auto 0;}
.naver li{ width:100px; height:50px; overflow:hidden; float:left; font-size:16px; text-align:center; cursor: pointer; }
.naver li a,.naver li a:hover{display: block;width:100px; height:50px; line-height: 50px; color:#FFF; text-decoration: none; }
.co1{ background:#649e37}
.co2{ background:#028fbc}
</style>
<script type="text/javascript">
window.onload=function()
{
var oUl=document.getElementById("nav");
var aLi=oUl.getElementsByTagName("li");
var i=0;
for(i=0;i<aLi.length;i++)
{
aLi[i].timer=null;
aLi[i].speed=0;
aLi[i].onmouseover=function()
{
startMove(this,150);
};
aLi[i].onmouseout=function()
{
startMove2(this,50);
};
}
};
function startMove(obj,iTarget)
{
if(obj.timer)
{
clearInterval(obj.timer);
}
obj.timer=setInterval(function(){
doMove(obj,iTarget);
},30)
};
function doMove(obj,iTarget)
{
obj.speed+=3;
if(Math.abs(iTarget-obj.offsetHeight)<1 && Math.abs(obj.speed)<1)
{
clearInterval(obj.timer);
obj.timer=null;
}
else
{
if(obj.offsetHeight+obj.speed>=iTarget)
{
obj.speed*=-0.7;
obj.style.height=iTarget+"px";
}
else
{
obj.style.height=obj.offsetHeight+obj.speed+"px";
}
}
};
function startMove2(obj,iTarget)
{
if(obj.timer)
{
clearInterval(obj.timer);
}
obj.timer=setInterval(function(){
doMove2(obj,iTarget);
},30)
};
function doMove2(obj,iTarget)
{
obj.speed-=3;
if(Math.abs(iTarget-obj.offsetHeight)<1 && Math.abs(obj.speed)<1)
{
clearInterval(obj.timer);
obj.timer=null;
}
else
{
if(obj.offsetHeight+obj.speed<=iTarget)
{
obj.speed*=-0.7;
obj.style.height=iTarget+"px";
}
else
{
obj.style.height=obj.offsetHeight+obj.speed+"px";
}
}
};
</script>
</head>
<body>
<ul id="nav" class="naver">
<li class="co1"><a href="#">首页</a></li>
<li class="co2"><a href="#">简历</a></li>
<li class="co1"><a href="#">作品</a></li>
<li class="co2"><a href="#">联系</a></li>
</ul>