Js纵向动态改变高度的弹性菜单javascript
演示效果：
说明：
Js纵向动态改变高度的菜单，俗称弹性菜单，鼠标放在菜单项上，菜单项纵向拉长，增加点动感元素，以前发过类似的代码，由此可扩展，可以改为横向拉伸的菜单，挺不错的效果。
实现代码：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>有弹性的菜单</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="#">联系</a></li>
<li class="co1"><a href="#">博客</a></li>
</ul>
</body>
</html>
下一篇：Js横向动态改变宽度的弹性菜单
我要评论