标签：
<!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>
标签：
原文地址：http://www.cnblogs.com/youtianxia/p/4241154.html
