js 简易的筋斗云，图片动画

HTML代码

<ul>
        <li>首页</li>
        <li>项目</li>
        <li>客户</li>
        <li>专项</li>
        <li>材料</li>
        <li>科目</li>
        <li>联系</li>
        <li>详情</li>
        <div><div></div></div>
    </ul>

css代码

        *{
            margin: 0;
            padding: 0;
        }
        ul{
            position: relative;
            width: 800px;
            height: 50px;
            margin: 0 auto;
        }
        ul li{
            list-style: none;
            float: left;
            width: 100px;
            height: 50px;
            background-color: aquamarine;
            text-align: center;
            line-height: 50px;
        }
        li:nth-child(1){
            color: white;
        }
        ul li:hover{
            background-color: red;
            color: white;
        }
        .list{
            width: 100px;
            height: 5px;
            position: absolute;
            background-color: transparent;
            top: 0;
            left: 0;
        }
        .list div{
            width: 80px;
            height: 5px;
            background-color: turquoise;
            margin: 0 10px;
        }
        /* 鼠标点击事件替换的字体颜色class样式 */
        .white{
            color: white;
        }
        .black{
            color:black;
        }

JS代码

点击事件样式更改 : 给标签添加样式的形式改变，由于会和：hover 伪类正在使用的俩个属性(color,background)发生冲突 , 所以不能直接更改style属性(style属性会直接覆盖:hover伪类使用的值，他的权级最高)

        var li=document.querySelectorAll('li');
        var lali=ul.lastElementChild;
        lali.className="list";


        for (let i = 0; i < li.length; i++) {
            // 当鼠标移入
            li[i].addEventListener("mouseover",function(){
                animLeft(lali,this.offsetLeft);
            })
            // 当鼠标移出
            li[i].addEventListener("mouseout",function(){
                animLeft(lali,lalileft);
            })
            // 当鼠标点击
            li[i].addEventListener("click",function(){
                lalileft=this.offsetLeft;
                for (let k = 0; k < li.length; k++) {
                    li[k].className="black"
                }
                this.className="white";
                animLeft(lali,lalileft);
            })
        }

        //封装的方法 移动动画
        function animLeft(obj,target,funt){
            // console.log(funt); funt = function(){}  调用的时候  funt()

            clearInterval(obj.time);//打开定时器就清除定时器，防止点击开启多个定时器
            obj.time=setInterval(()=>{
                // let step=Math.ceil((target-obj.offsetLeft)/20);//步长值取整
                let step=(target-obj.offsetLeft)/15;    
                //判断步长值是正数还是负数，取大小 实现倒退
                step = step > 0 ? Math.ceil(step):Math.floor(step);           
                obj.style.left=obj.offsetLeft+ step + 'px'; //left
                if(obj.offsetLeft == target){
                    // 停止动画 定时器
                    clearInterval(obj.time);
                    // 回调函数写在 定时器结束里面
                    funt && funt();
                }
            },20);
        }