<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS+JS打造的一款flash效果的弹性菜单丨</title>
<style>
*{ margin:0px; padding:0px;}
body { background:#fff;}
.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="http://www.hbjbz.net/">河北京梆子锅炉</a></li>
<li class="co1"><a href="#">河北金邦子锅炉</a></li>
</ul>
</body>
</html>
<div style="height:200px;"></div><br><br><hr>
时间： 2024-11-07 14:44:47