仿妙味课堂导航（转） 

<!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: 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; }
miaov_style.css

思路：

1）#header下的直接ul是页面上显得是默认样式的导航

2）#btn_bg是粉色背景的div，当鼠标经过li时，让#btn_bg定位在当前li上

3）同时通过改变#btn_bg中ul的left值，让#btn_bg中相应的li显示在#btn_bg的位置。

posted @ 2017-02-21 15:45  dongxiaolei  阅读(211)  评论(0)  编辑  收藏  举报