有个性的弹性菜单，CSS+JavaScript

2024-09-05 12:20:48

字体：大中小

来源：转载

供稿：网友

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

<!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=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">首页</li>		<li class="co2">简历</li>		<li class="co1">作品</li>		<li class="co2">联系</li>        <li class="co1">博客</li>	</ul></body></html>

上一篇：jQuery 黑色的二级下滑菜单

下一篇：文本框输入提示/自动完成的Js代码

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注