JS原生动态导航

当鼠标经过时，背景选中，同时做缓冲运动

主要知识点，元素获取、类数组转数字方法、forEach循环、定时器、加速度、缓速运动，绝对值Math.abs的运用

CSS样式片段

*{
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
        ul{ 
            position: relative;
            width: 600px;
            height: 80px;
            margin: 100px auto 0;
        }
        ul li.nav{
            width: 148px;
            height: 78px;
            border: 1px solid #000;
            font-size: 24px;
            text-align: center;
            line-height: 78px;
            float: left;
            color: red;
        }
        ul li.bg{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 150px;
            height: 80px;
            background: orange;
            opacity: 0.5;
        }

HTML5代码片段

    <ul>
        <li class="nav">英语</li>
        <li class="nav">数学</li>
        <li class="nav">化学</li>
        <li class="nav">语文</li>
        <li class="bg"></li>
    </ul>

原生JS代码片段

 <script>
            //运用slice方法，把类数组转变成数组
            var oNav =Array.prototype.slice.call(document.getElementsByClassName('nav'),0);
            var oBg = document.getElementsByClassName('bg')[0];
            //也可以用for循环 这里使用forEach代替
            oNav.forEach(function(ele,index){
                //当鼠标经过时的事件
                ele.onmouseenter = function(){
                    //获取当前nav的位子
                    var newLeft = this.offsetLeft;
                    //两个参数，第一个为背景，第二个为当前需要背景的位子
                    yidong(oBg,newLeft);
                }
            })

            function yidong(obj,target){
                clearInterval(obj.timer);
                //speed速度，a加速度,u摩擦力
                var speed = 10, a, u = 0.8;
                //开启当前背景定时器
                obj.timer = setInterval(function(){
                    //做缓冲运动，目标点位子-当前位子，越小速度越小
                    a = (target - obj.offsetLeft) / 8;
                    //运动方向
                    speed = speed + a;
                    //增加阻力
                    speed = speed * u;
                    //停止条件，当速度绝对值小于1，或者位子绝对值小于1停止，否则继续执行
                    if(Math.abs(speed) <= 1 && Math.abs(target - obj.offsetLeft) <= 1){
                        clearInterval(obj.timer);
                        obj.style.left = target + 'px';
                    }else{
                        obj.style.left = obj.offsetLeft + speed + 'px';
                    }
                },30)
            }

            
        </script>