仿妙味课堂导航（转）
Posted dongxiaolei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了仿妙味课堂导航（转）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="miaov_style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="miaov.js"></script> </head> <body> <div id="header"> <ul> <li class="normal"><a href="javascript:void (0);">首页</a></li> <li class="normal"><a href="javascript:void (0);">课程</a></li> <li class="normal"><a href="javascript:void (0);">资源</a></li> <li class="normal"><a href="javascript:void (0);">留言</a></li> <li class="normal"><a href="javascript:void (0);">博客</a></li> <li class="normal"><a href="javascript:void (0);">联系</a></li> </ul> <div id="btn_bg"> <ul> <li class="active"><a href="javascript:void (0);">首页</a></li> <li class="active"><a href="javascript:void (0);">课程</a></li> <li class="active"><a href="javascript:void (0);">资源</a></li> <li class="active"><a href="javascript:void (0);">留言</a></li> <li class="active"><a href="javascript:void (0);">博客</a></li> <li class="active"><a href="javascript:void (0);">联系</a></li> </ul> </div> </div> </body> </html>
var speed=0; var cur=0; var timer1=null; window.onload=function () { var oDiv=document.getElementById(\'btn_bg\'); var oUl=oDiv.getElementsByTagName(\'ul\')[0]; var aLi=document.getElementById(\'header\').getElementsByTagName(\'ul\')[0].getElementsByTagName(\'li\'); var i=0; for(i=0;i<aLi.length;i++) { aLi[i].mIndex=i; aLi[i].onmouseover=startMove; } cur=-oUl.offsetLeft; }; function startMove() { var oDiv=document.getElementById(\'btn_bg\'); var oUl=oDiv.getElementsByTagName(\'ul\')[0]; oDiv.style.left=432+cur+\'px\'; oUl.style.left=-cur+\'px\'; if(timer1) { clearInterval(timer1); } timer1=setInterval("doMove("+this.offsetLeft+")", 35); } function doMove(iTarget) { var oDiv=document.getElementById(\'btn_bg\'); var oUl=oDiv.getElementsByTagName(\'ul\')[0]; speed+=(iTarget+oUl.offsetLeft)/5; speed*=0.7; if(Math.abs(speed)>60) { speed=speed>0?60:-60; } cur+=speed; if(cur>0) { cur=Math.ceil(cur); } else { cur=Math.floor(cur); } if(Math.abs(iTarget-cur)<1 && Math.abs(speed)<1) { clearInterval(timer1); timer1=null; } else { oDiv.style.left=432+cur+\'px\'; oUl.style.left=-cur+\'px\'; } }
/* * http://www.miaov.com - Time: 2009-11-7 - QQ: 20907961 - Mobile: 13141414820 - Email: lw-2004@126.com - Name: leo(LiuWei) */ 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(images/bg.gif) 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(images/btn_bg.gif); position: absolute; overflow:hidden; left: 608px; bottom: 0; z-index: 2; } #btn_bg ul { width: 528px; left:-176px; position:absolute; }
思路：
1）#header下的直接ul是页面上显得是默认样式的导航
2）#btn_bg是粉色背景的div，当鼠标经过li时，让#btn_bg定位在当前li上
3）同时通过改变#btn_bg中ul的left值，让#btn_bg中相应的li显示在#btn_bg的位置。
以上是关于仿妙味课堂导航（转）的主要内容，如果未能解决你的问题，请参考以下文章