<!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>
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‘;
}
}
miaov.js
/*
* http://www.miaov.com - Time: 2009-11-7 - QQ: 20907961 - Mobile: 13141414820 - Email: [email protected] - 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; }
miaov_style.css
思路：
1）#header下的直接ul是页面上显得是默认样式的导航
2）#btn_bg是粉色背景的div，当鼠标经过li时，让#btn_bg定位在当前li上
3）同时通过改变#btn_bg中ul的left值，让#btn_bg中相应的li显示在#btn_bg的位置。
时间： 2024-10-09 08:37:18