JS escribió el fondo ecológico original del control deslizante de navegación

Mira los resultados:

Ratón se desliza al elemento de navegación, una parte posterior de diapositivas en color de la tecla de navegación correspondiente.

Cuando el ratón hacia la izquierda, deslice de nuevo a los elementos de navegación actuales.

La unión de la transición do CSS3 efecto de deslizamiento.

Primero, el análisis

1. navegación en la parte superior, que indica que hay navegación jerárquica, y alto. Así que, o navegación posicionamiento relativo, o es el posicionamiento absoluto. Sólo el posicionamiento de la etiqueta, la jerarquía z-index será eficaz. Aquí, elegimos el posicionamiento relativo .

Diapositiva a, que debe ser el posicionamiento absoluto , y el nivel inferior, detrás de la navegación. Y, por el patrón de atributo izquierdo, el cambio de posición de la corredera de control.

2. La anchura de la li control deslizante a mantener constante, para obtener puede utilizarse un li anchura  offsetWidth propiedades.

3. deslizador li para desplazarse a la ubicación para ir.

    Puede llegar a estar li.getBoundingClientRect () a la izquierda -. Ul.getBoundingClientRect (    .) A la izquierda Obtener la posición relativa en el interior li ul.

     Entonces estilo deslizador de control izquierda puede cambiar la posición del cursor.

En segundo lugar, el código

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