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

发布时间：2018-08-16 00:28:25 所属栏目：创业来源：站长网

导读：某位前端牛人使用 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>
提示：可修改后代码再运行!

（编辑：PHP编程网 - 襄阳站长网）

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

与用户双向奔赴私域，	理想未来城市哪止于物
波司登，拿高端化解释	印度裔CEO称霸硅谷，印