导航栏筋斗云

Posted 2020-11-13 zard23

css如下

*{
        padding: 0;
        margin: 0;
    }
    body{
        background-color: rgba(0, 0, 0, 0.6);
    }
    .box{
        width: 415px;
        height: 42px;
        margin: 200px auto;
        background-color: #fff;
        position: relative;
    }
    ul{
        list-style: none;
        position: relative;
    }
    li{
        float: left;
        width: 83px;
        height: 42px;
        text-align: center;
        font: 500 15px/42px "微软雅黑";
        cursor: pointer;
    }
    span{
        position: absolute;
        left: 0;
        top: 0;
        width: 83px;
        height: 42px;
        background-image: linear-gradient(to right,#03c03c 50% ,#51ee5d 100%);
    }

 

html如下

<div>
    <span></span>
    <ul>
        <li>菜单栏1</li>
        <li>菜单栏2</li>
        <li>菜单栏3</li>
        <li>菜单栏4</li>
        <li>菜单栏5</li>
    </ul>
</div>            

js如下

window.onload = function(){
        // 鼠标放在哪个li上面，span对应一道到哪里，移开后回到原位置
        var liArr = document.getElementsByTagName("li");
        var liWidth = liArr[0].offsetWidth;
        var span = document.getElementsByTagName("span")[0];
        // 计数器
        var cnt = 0;
 
        // for循环绑定事件
        for(var i=0; i<liArr.length; i++){
            // 自定义属性，然后绑定index属性为索引值
            liArr[i].index = i;
            // 鼠标进入事件
            liArr[i].onmouseover = function(){
                // 然span运动到该li的索引值位置
                animate(span, this.index*liWidth);
            }
            // 鼠标移开
            liArr[i].onmouseout = function(){
                // span运动到原位置
                animate(span, cnt*liWidth);
            }
            // 点击事件
            liArr[i].onclick = function(){
                // 计数器记录当前标签索引值
                cnt = this.index;
                animate(span, cnt*liWidth);
            }
        }
 
        // 缓动动画封装
        function animate(element, target){
            // 清除间歇调用
            clearInterval(element.timer);
            // 设置超时调用
            element.timer = setInterval(function(){
                // 设置步数
                var step = (target - element.offsetLeft)/10;
                // 调整步数
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                // 设置样式
                element.style.left = element.offsetLeft + step + "px";
                // console.log(1);
                if(Math.abs(target - element.offsetLeft) < Math.abs(step)){
                    element.style.left = target + "px";
                    clearInterval(element.timer);
                }
            }, 20);
        }
 
    }