JS導航跟隨效果

  如何實現上面的效果，請看下面的步驟
  第一步：用 css 調整樣式 ，這裏小編用的是彈性盒子實現導航的平均分配。（聰明的你能夠嘗試用其餘的方式看看能不能實現）css代碼以下：
 

<style type="text/css">
        *{padding:0;margin:0;}
        a{text-decoration:none;}
        html,body{height:100%;width:100%;background:black;}
        ul{position:relative;width:990px;list-style:none;background:white;display: flex;flex-direction:row;justify-content: space-around;margin:50px auto;border-radius:10px;}
        ul  li{position: relative;flex:1;text-align:center;}
        ul  li a{font-size:18px;color:#333;padding:10px 0;display: block;}
        .cloud{position:absolute;left:32px;top:0;bottom:0;margin:auto;width:83px;height:42px;background:url('images/cloud.gif');}
    </style>

html代碼以下：這裏 a 標籤中的 href 屬性後面加上那句代碼是爲了在實現點擊事件時不讓他有其餘事件發生

<ul>
        <span class="cloud"></span>
        <li> <a href="javascript:viod(0)">首頁 </a></li>
        <li><a href="javascript:viod(0)">電視劇</a></li>
        <li><a href="javascript:viod(0)">最新電影</a></li>
        <li><a href="javascript:viod(0)">新聞頭條</a></li>
        <li><a href="javascript:viod(0)">八卦娛樂</a></li>
        <li><a href="javascript:viod(0)">軍事熱點</a></li>
    </ul>

第二步：分析下如何得到   圖片（cloud.gif）   距離最左邊的  left  值

 第三步：實現鼠標移動，移除，和點擊事件的效果

<script type="text/javascript">
       //得到類爲cloud的標籤，
        var pic=document.getElementsByClassName('cloud')[0];
        //得到全部的 li 標籤
        var liList=document.getElementsByTagName('li');
        //定義向右的移動初始距離
        var liLeft=32;
        //定義緩慢動畫的初始值
        var header=32;
        //用於定義當鼠標點擊時的初始位置
        var currentLeft=32;
        for(var i=0;i<liList.length;i++){
            //鼠標放上事件
            liList[i].onmouseover=function(){
                //獲取目標距離
               liLeft = this.offsetLeft+this.offsetWidth/2-pic.offsetWidth/2;
            }
            //鼠標移除事件
             liList[i].onmouseout=function(){
                //當鼠標移除某個li的時候把目標距離改成初始狀態
               liLeft=currentLeft;
            }
            //鼠標點擊事件
            liList[i].onclick=function(){
                currentLeft=this.offsetLeft+this.offsetWidth/2-pic.offsetWidth/2;
            }

        }
        //定義緩慢動畫
        setInterval(function(){
            header = header + (liLeft-header)/10;
            pic.style.left = header + 'px';
        },20);
    </script>