导航栏

    <div id="c_nav" class="c-nav">
        <span class="cloud"></span>
        <ul>
            <li class="current"><a href="#">IG</a></li>
            <li><a href="#">TheShy</a></li>
            <li><a href="#">Ning</a></li>
            <li><a href="#">Rookie</a></li>
            <li><a href="#">Baolan</a></li>
            <li><a href="#">Jacklove</a></li>
            <li><a href="#">WXZ</a></li>
            <li><a href="#">望远烬</a></li>
        </ul>
    </div>

    * {
        margin: 0;
        padding: 0
    }
    ul {
        list-style: none;
    }
    body {
        background-color: black;
    }
    .c-nav {
        width: 900px;
        height: 42px;
        background: #fff url(../img/rss.png) no-repeat right center;
        margin: 100px auto;
        border-radius: 5px;
        position: relative;
    }
    .c-nav ul {
        position: absolute;
    }
    .c-nav li {
        float: left;
        width: 83px;
        text-align: center;
        line-height: 42px;
    }
    .c-nav li a {
        color: #333;
        text-decoration: none;
        display: inline-block;
        height: 42px;
    }
    .c-nav li a:hover {
        color: white;
    }
    .c-nav li.current a {
        color: #0dff1d;
    }
    .cloud {
        position: absolute;
        left: 0;
        top: 0;
        width: 83px;
        height: 42px;
        background: url(../img/cloud.gif) no-repeat;
    }

    function animate1(obj,target,callback){
        //1.清除定时器
        clearInterval(obj.timer);
        //2.设定定时器
        obj.timer= setInterval(()=>{
            //3.步长取整
            let step = Math.ceil( (target-obj.offsetLeft)/10 );
            step = step >0 ? Math.ceil(step):Math.floor(step);
            if(target === obj.offsetLeft){
                clearInterval(obj.timer);
                if(callback){
                    callback();
                }
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        },15)
    }
    window.addEventListener('load',()=>{
        let cloud = document.querySelector('.cloud');
        let c_nav = document.querySelector('.c-nav');
        let lis   = c_nav.querySelectorAll('li');
        console.log(lis);
        //2.设定 cloud 的起始位置
        let current = 0;
        lis.forEach((v,k)=>{
            lis[k].addEventListener('mouseenter',function(){
                animate1(cloud,this.offsetLeft);
            })
            lis[k].addEventListener('mouseleave',function(){
                animate1(cloud,current);
            })
            lis[k].addEventListener('click',function(){
                current = this.offsetLeft;
            })
        })
    })