[css+js] 有个性的弹性菜单，CSS+JavaScript

2014-08-18 23:28:40 -0400

代码演示

代码说明

有弹性的横向导航菜单，鼠标放到菜单的某个项目上，菜单会做弹性变化，像是碰到了什么东西又反弹了回来，类似Flash动画的效果，操作起来觉得很灵动的菜单，用jQuery可以很好的实现，这里主要是JavaScript实现的。

代码复制

<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>

«Newer Older»

Back to home

Subscribe | Register | Login | N