網頁中鼠標移動到導航欄，導航橫線移動效果製作

其實效果就是根據判斷第幾個導航，通過left移動多少距離，代碼如下

css 部分

.clearfix:after{
        content: '';
        display: block;
        height: 0px;
        clear:both;
        overflow: hidden;
    }
    li{
        list-style: none;
        float: left;
        width: 80px;
        height: 20px;
        padding: 10px;
        margin-left: 5px;
        text-align: center;
    }
    ul{
        position: relative;
    }
    ul:hover{
        cursor: pointer;
    }
    ul> div>a{
        content: '';
        position: absolute;
        top:45px;
        left:45px;
        width: 100px;
        height: 3px;
        background: green;
        transition: left .2s linear;
    }

html body內容部分

<ul class="clearfix">
    <li>首頁</li>
    <li>新聞</li>
    <li>資訊</li>
    <li>活動信息</li>
    <li>關於我們</li>
    <li>聯繫客服</li>
    <div>
        <a href="#"></a>
    </div>
</ul>

js部分  注此處使用jQuery

$(function(){
        console.log($('li').length)
        for (var i = 0; i < $('li').length; i++) {
            (function(i){
                $('li').eq(i).hover(function(){
                  console.log(i)
                  if (i == 0) {
                      $('ul>div>a').eq(0).css('left',45)
                  }else {
                      $('ul>div>a').eq(0).css('left',45+i*105)
                  }
                  
                })
            })(i)
            
        }
    })

 

GitHub地址：https://github.com/zhoufeiyue/navHover/blob/master/%E5%AF%BC%E8%88%AA%E6%95%88%E6%9E%9C.html