js+css 完成一个大度的、富有弹性的导航菜单

发布时间：2018-08-16 12:59:43 所属栏目：创业来源：站长网

导读：某位前端牛人行使 Java script团结CSS 完成的一个大度、富有弹性的导航菜单，小编方才看到的时辰还觉得是 jQuery 实现的，作者只是完成了一个雏形，也可以说是一个模板，各人详细行使时，还必要修改一些笔墨和颜色等，很是不错。保举行使。代码演示： !DO

　　某位前端牛人行使Javascript团结CSS 完成的一个大度、富有弹性的导航菜单，小编方才看到的时辰还觉得是jQuery实现的，作者只是完成了一个雏形，也可以说是一个模板，各人详细行使时，还必要修改一些笔墨和颜色等，很是不错。保举行使。

　　代码演示：

<!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"; } } }; // 猛火網 liehuo.net 接待复制,拒绝恶意收罗ｌｉｅｈｕｏ．ｎｅｔ 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> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如