<!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的位置。