每天实现一个小特效：百度新闻导航栏特效

百度新闻导航栏如下图所示

 由于不会弄成动图，只能贴一下静态的图片了，大家可以打开百度新闻看一下，抱歉。

HTML代码如下：

<ul>
    <div class="move"></div>
    <li>首页</li>
    <li>国内</li>
    <li>互联网</li>
    <li class="active">财经</li>
    <li>体育</li>
    <li>汽车</li>
</ul>

CSS代码如下：

*{
            padding: 0;
            margin: 0;
        }
        ul{
            margin: 200px auto;
            list-style: none;
            background: #01204f;
            width: 1000px;
            height: 40px;
            position: relative;
        }

        ul li{
            color: #fff;
            line-height: 40px;
            padding-left: 6px;
            padding-right: 6px;
            cursor: pointer;
            transition: background ease .6s;
            position: relative;
            box-sizing: border-box;
            display: inline-block;
            margin-left: -5px;
        }
        li:nth-child(2){
            margin-left: 0;
        }

        .active{
            background-color: #c00;
        } 

        .move{
            background-color: #c00;
            width: 44px;
            height: 40px;
            position: absolute;
            top: 0;
            transition: all ease 0.6s;
            overflow: hidden;
        }

JavaScript代码如下：

var ul = document.getElementsByTagName("ul")[0];
    var li = document.getElementsByTagName("li");
    var active = document.getElementsByClassName("active")[0];
    var move = document.getElementsByClassName("move")[0];
    var activeLeft = active.offsetLeft + "px";
    move.style.left = activeLeft;

    for(var i=0;i<li.length;i++){
        //鼠标移入
        li[i].onmouseover = (function(k){
            return function(){
                move.style.width = li[k].clientWidth + "px";
                move.style.left = li[k].offsetLeft + "px";
            }
        })(i);

        //鼠标移出
        li[i].onmouseout = function(){
            move.style.width = active.clientWidth + "px";
            move.style.left = activeLeft;
        }
    }

    ul.onmouseout = function(){
        move.style.width = active.clientWidth + "px";
        move.style.left = activeLeft;
    }