<!DOCTYPE html><html><head> <meta charset="UTF-8"><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: 83px; height: 42px; background: url(cloud.gif); 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>
1 回答
- 1 回答
- 0 关注
- 933 浏览
添加回答
举报
0/150
提交
取消