百度运动导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 百度运动导航栏-JavaScript </title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            color: #FFFFFF;
            font-weight: 900;
        }
        #box {
            width: 1088px;
            background: blue;
            position: relative;
            margin: 100px auto 0;
        }
        #list {
            position: relative;
        }
        #list:after {
            height: 0;
            clear: both;
            content: ".";
            display: block;
            visibility: hidden;
        }
        #list li {
            float: left;
            cursor: pointer;
            list-style: none;
            margin-right: 1px;
            padding: 12px 20px;
            position: relative;
            z-index: 2;
        }
        #shade {
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            position: absolute;
            background: orangered;
        }
    </style>
</head>

<body>
<div id="box">
    <ul id="list">
        <li class="active">首页</li>
        <li>关于我们</li>
        <li>新闻</li>
        <li>列表</li>
        <li>视频</li>
        <li>传媒</li>
        <li>互联网</li>
        <li>个性推荐</li>
        <li>体育</li>
        <li>房地产</li>
        <li>娱乐</li>
        <li>财经</li>
        <li>联系我们</li>
        <div id="shade"></div>
    </ul>
</div>
<script>
    var oBox = document.getElementById("box");
    var oList = document.getElementById("list");
    var oShade = document.getElementById("shade");
    var oLi = oList.getElementsByTagName("li");
    var timer = null;
    var num = 0;
    var shadeWidth = oLi[0].offsetWidth + 'px';
    oShade.style.width = shadeWidth;
    for (var i = 0 ; i < oLi.length ; i++) {
        oLi[i].index = i;
        oLi[i].onmouseover = function(){
            oShade.style.width = oLi[this.index].offsetWidth + 'px';
            startMove( this.offsetLeft );
        }
        oLi[i].onmouseout = function(){
            startMove(num);
            oShade.style.width = shadeWidth;
        };
        oLi[i].onclick = function(){
            num = this.offsetLeft;
        }
    };
    var timer = null;
    function startMove(target){
        clearInterval(timer);
        timer = setInterval(function(){
            var speed = (target-oShade.offsetLeft)/10;
            speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
            if (target == oShade.offsetLeft) {
                clearInterval(timer);
            }else{
                oShade.style.left = oShade.offsetLeft + speed + "px";
            };
        },30);
    };
</script>
</body>
</html>

推荐阅读更多精彩内容