原生態JS寫背景有個滑塊的導航

先看效果：

鼠標滑動到導航項上，後面一個色塊滑動到對應的導航項上。

鼠標離開的時候，滑塊就退回到當前導航項上。

結合了 CSS3 的 transition 來做滑動效果。

一、分析

1. 導航在上方，說明導航有層級，且較高。那麼導航要麼是相對定位，要麼就是絕對定位。只有定位的標籤，層級 z-index 纔有效果。這裏，我們選擇相對定位。

滑塊 能滑動，說明它肯定是絕對定位的，並且層級較低，在導航的後面。並且，可以通過樣式的 left 屬性，控制滑塊的位置變化。

2. 滑塊的寬度要跟 li 的寬度保持一致，要獲取 li 的寬度，可以利用  offsetWidth 屬性。

3. 滑塊要移動到 li 的位置去。

    可以獲取 li.getBoundingClientRect().left  -  ul.getBoundingClientRect().left   得到 li 在 ul 裏的相對位置。

     再控制滑塊的樣式  left  就可以改變滑塊的位置了。

二、代碼

<nav class="daohang">
    <div class="section">
        <ul id="ul">
            <li class="current"><a href="#">公司</a></li>
            <li><a href="#">公司介紹</a></li>
            <li><a href="#">產品介紹</a></li>
            <li><a href="#">聯繫我們</a></li>
            <li><a href="#">責任</a></li>
            <li><a href="#">2020我們在一起</a></li>
        </ul>
        <div id="box" class="box"></div>
    </div>
</nav>

/* 公用樣式 */
*{
    margin: 0;
    padding: 0;
}
ul,li,ol{
    list-style: none;
}
a{
    text-decoration: none;
}
body{
    font-family: Arial,Verdana,"Microsoft Yahei",".PingFang SC","Simsun";
    font-size: 14px;
}

/* 導航 主體*/
.daohang{
    height: 50px;
    line-height: 50px;
    background: #29387e;
}
.section{
    width: 1200px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    position: relative;
}
.daohang li{
    float: left;
}
.daohang ul{
    position: relative;
    z-index: 1;
    height: 50px;
}
.daohang ul a{
    display: block;
    height: 50px;
    padding-left: 20px;
    padding-right: 20px;
    color: #fff;
    text-align: center;
}
.daohang li.current a{
    background: #f30;
}
.box{
    height: 50px;
    background: #f30;
    position: absolute;
    left: 0;
    top: 0;
    transition:all 0.3s cubic-bezier(0.23, 1, 0.32, 1.05);  /* 滑塊的滑動 就靠它了 */
}

let box = document.getElementById("box");
let ul = document.getElementById("ul");
let li = ul.children;
let cur = ul.querySelector(".current");
/*
* 設置 box 的位置函數
* */
let  setBoxPosition = function(tag){
    let ulX = ul.getBoundingClientRect().left;
    let liX =tag.getBoundingClientRect().left;
    box.style.left =(liX- ulX ) + "px";       // 滑塊位置更改
    box.style.width =tag.offsetWidth + "px";  // 滑塊寬度更改
};
// 給 li 添加事件
for( let i = 0 ; i <= li.length-1 ; i++ ){
    li[i].addEventListener("mouseenter",function(event){
        setBoxPosition( event.currentTarget );
    });
    li[i].addEventListener("mouseleave",function(event){
        setBoxPosition( cur );
    });
}
setBoxPosition( cur );  //  初始化滑塊的位置