原生态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 );  //  初始化滑块的位置