鼠标滑过菜单文字背景弹性移动，JS+CSS实现

发布时间：2018-08-30 21:39:05 所属栏目：政策来源：站长网

导读：当鼠标滑过菜单时，导航中文字的背景弹性移动变化，这是基于 Java Script+CSS实现的，大家不要以为用了 jQuery 哦，类似这样的例子，大家可以回顾一下烈火网以前的文章，例如：JavaScript 妙味课堂仿Flash滑动导航菜单。本文示例： !DOCTYPE htmlhtmlhead

　　当鼠标滑过菜单时，导航中文字的背景弹性移动变化，这是基于JavaScript+CSS实现的，大家不要以为用了jQuery哦，类似这样的例子，大家可以回顾一下烈火网以前的文章，例如：JavaScript 妙味课堂仿Flash滑动导航菜单。

　　本文示例：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>Js实现菜单弹性菜单</title> <style type="text/css"> body, ul, ol, dl, dt, dd, h1, h2, h3, h4, h5, p, form { padding: 0; margin: 0; } li { list-style: none; } img { border: 0; } body { font-family: Arial; background: #fff url() repeat-x; } #header { width: 960px; height: 107px; margin: 0 auto 12px; position: relative; } #header h1 { padding-top: 15px; float: left; } #header ul { height: 44px; position: absolute; right: 0; bottom: 0; } #header .normal, #header .active { float: left; width: 88px; height: 44px; position: relative; z-index: 1; } #header .normal a, #header .active a { float: left; width: 88px; height: 44px; line-height: 44px; text-align: center; text-decoration: none; font-size: 14px; font-weight: bold; } #header .active a { color: #fff; } #header .normal a { color: #999; } #btn_bg { width: 88px; height: 44px; background: #fb2347 url(); position: absolute; overflow:hidden; left: 608px; bottom: 0; z-index: 2; } #btn_bg ul { width: 528px; left:-176px; position:absolute; } </style> <script type="text/javascript"> var away; window.onload=function() { var odiv=document.getElementById("btn_bg"); var oul=odiv.getElementsByTagName("ul")[0]; var oli=document.getElementById("header").getElementsByTagName("ul")[0].getElementsByTagName("li"); var i=0; for(i=0;i<oli.length;i++) { oli[i].index=i; oli[i].onmouseover=function() { away=432+88*this.index; menuInterval(); }; }; } var timer=null; function menuInterval() { if(timer) { clearInterval(timer); } timer=setInterval(menuMove, 30); } var step=0; var l=0; function menuMove() { var odiv=document.getElementById("btn_bg"); var oul=odiv.getElementsByTagName("ul")[0]; step+=(away-odiv.offsetLeft)/10; step=step*0.78; l=parseInt(odiv.offsetLeft+step); odiv.style.left=l+"px"; oul.style.left=-l+432+"px";; } </script> </head> <body> <div id="header"> <ul> <li class="normal"><a href="http://www.veryhuo.com/">首页</a></li> <li class="normal"><a href="#">叶子课程</a></li> <li class="normal"><a href="#">叶子资源</a></li> <li class="normal"><a href="#">留言</a></li> <li class="normal"><a href="#">叶子博客</a></li> <li class="normal"><a href="#">联系叶子</a></li> </ul> <div id="btn_bg"> <ul> <li class="active"><a href="#">首页</a></li> <li class="active"><a href="#">叶子课程</a></li> <li class="active"><a href="#">叶子资源</a></li> <li class="active"><a href="#">留言</a></li> <li class="active"><a href="#">叶子博客</a></li> <li class="active"><a href="#">联系叶子</a></li> </ul> </div> </div> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：淮北站长网）

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