js 弹性导航

<style>
*{margin:0;padding:0;}
#box{height:50px;float:left;position:relative;background:#f90;}
#bar{width:64px;height:100%;position:absolute;left:0;top:0;background:#333;}
#bar .l{width:0;height:100%;background:#333;border-radius:50%;position:absolute;top:0;left:0;}
#bar .r{width:0;height:100%;background:#333;border-radius:50%;position:absolute;top:0;right:0;}
#ul{height:100%;font-size:14px;letter-spacing:1px;font-family:"微软雅黑";list-style:none;position:relative;}
#ul li{height:100%;line-height:50px;float:left;}
#ul a{height:100%;text-decoration:none;color:#fff;padding:0 20px;display:block;}
</style>

<div id="box">
    <div id="bar">
        <div class="l"></div>
        <div class="r"></div>
    </div>
    <ul id="ul">
        <li><a href="#1">祝</a></li>
        <li><a href="#2">大家</a></li>
        <li><a href="#3">在2018</a></li>
        <li><a href="#4">能顺利</a></li>
        <li><a href="#5">掌握</a></li>
        <li><a href="#6">javaScript</a></li>
    </ul>
</div>

<script>
var oBar=document.getElementById("bar"),
    oRight=oBar.getElementsByClassName("r")[0],
    oLeft=oBar.getElementsByClassName("l")[0],
    oUl=document.getElementById("ul"),
    aLi=oUl.getElementsByTagName("li"),
    iNow=1;//表示当前哪项高亮
    oBar.style.left=aLi[iNow].offsetLeft+"px";
    oBar.style.width=aLi[iNow].offsetWidth+"px";
    for(var i=0;i<aLi.length;++i){
        aLi[i].index=i;
        aLi[i].onmouseover=function(){
            lesgo(this);
        };
    }
    oUl.onmouseout=function(){
        lesgo(aLi[iNow]);
};
function lesgo(oLi){//效果主要函数
    var t=Math.abs(oLi.offsetLeft-oBar.offsetLeft)*0.7;
    move(oBar,{left:oLi.offsetLeft,width:oLi.offsetWidth},t,"easeOut",function(){
        move(oRight,{width:0,right:0},80,"linear",function(){
            oRight.style.background="#f90";
            move(oRight,{width:20,right:-10},80,"linear",function(){
                move(oRight,{width:0,right:0},50,"linear");
            });
        });
        move(oLeft,{width:0,left:0},80,"linear",function(){
            oLeft.style.background="#f90";
            move(oLeft,{width:20,left:-10},80,"linear",function(){
                move(oLeft,{width:0,left:0},50,"linear");
            });
        });
    });
    if(oLi.offsetLeft > oBar.offsetLeft){
          console.log(oLi.offsetLeft);
          console.log(oBar.offsetLeft);
        setColor('#333','#f90');

    }else if(oLi.offsetLeft < oBar.offsetLeft){
        setColor('#f90','#333');
    }
    function setColor(color1,color2){
        oRight.style.background = color1;
        oLeft.style.background = color2;
        move(oRight,{width:40,right:-20},150);
        move(oLeft,{width:40,left:-20},150);
    }
}

//下面都是运动库相关move(元素,属性json,时间,运动类型,运动结束函数)
function move(t, n, e, r, a) {
    clearInterval(t.iTimer);
    var u = e || 1e3,
        i = {};
    for (var o in n) i[o] = {}, "opacity" == o ? (i[o].b = Math.round(100 * css(t, o)), i[o].c = 100 * n[o] - i[o].b) : (i[o].b = parseInt(css(t, o)), i[o].c = n[o] - i[o].b);
    var r = r || "linear",
        c = (new Date).getTime();
    t.iTimer = setInterval(function() {
        var e = (new Date).getTime() - c;
        e >= u && (e = u);
        for (var o in n) {
            var f = Tween[r](e, i[o].b, i[o].c, u);
            "opacity" == o ? (t.style[o] = f / 100, t.style.filter = "alpha(opacity=" + f + ")") : t.style[o] = f + "px"
        }
        e == u && (clearInterval(t.iTimer), a && a.call(t))
    }, 14)

}
function css(t, n) {
    return t.currentStyle ? t.currentStyle[n] : getComputedStyle(t, !1)[n]
}
var Tween = {
    linear: function(t, n, e, r) {
        return e * t / r + n
    },
    easeIn: function(t, n, e, r) {
        return e * (t /= r) * t + n
    },
    easeOut: function(t, n, e, r) {
        return -e * (t /= r) * (t - 2) + n
    },
    easeBoth: function(t, n, e, r) {
        return (t /= r / 2) < 1 ? e / 2 * t * t + n : -e / 2 * (--t * (t - 2) - 1) + n
    },
    easeInStrong: function(t, n, e, r) {
        return e * (t /= r) * t * t * t + n
    },
    easeOutStrong: function(t, n, e, r) {
        return -e * ((t = t / r - 1) * t * t * t - 1) + n
    },
    easeBothStrong: function(t, n, e, r) {
        return (t /= r / 2) < 1 ? e / 2 * t * t * t * t + n : -e / 2 * ((t -= 2) * t * t * t - 2) + n
    },
    elasticIn: function(t, n, e, r, a, u) {
        if (0 === t) return n;
        if (1 == (t /= r)) return n + e;
        if (u || (u = .3 * r), !a || a < Math.abs(e)) {
            a = e;
            var i = u / 4
        } else var i = u / (2 * Math.PI) * Math.asin(e / a);
        return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin(2 * (t * r - i) * Math.PI / u)) + n
    },
    elasticOut: function(t, n, e, r, a, u) {
        if (0 === t) return n;
        if (1 == (t /= r)) return n + e;
        if (u || (u = .3 * r), !a || a < Math.abs(e)) {
            a = e;
            var i = u / 4
        } else var i = u / (2 * Math.PI) * Math.asin(e / a);
        return a * Math.pow(2, -10 * t) * Math.sin(2 * (t * r - i) * Math.PI / u) + e + n
    },
    elasticBoth: function(t, n, e, r, a, u) {
        if (0 === t) return n;
        if (2 == (t /= r / 2)) return n + e;
        if (u || (u = .3 * r * 1.5), !a || a < Math.abs(e)) {
            a = e;
            var i = u / 4
        } else var i = u / (2 * Math.PI) * Math.asin(e / a);
        return 1 > t ? -.5 * a * Math.pow(2, 10 * (t -= 1)) * Math.sin(2 * (t * r - i) * Math.PI / u) + n : a * Math.pow(2, -10 * (t -= 1)) * Math.sin(2 * (t * r - i) * Math.PI / u) * .5 + e + n
    },
    backIn: function(t, n, e, r, a) {
        return "undefined" == typeof a && (a = 1.70158), e * (t /= r) * t * ((a + 1) * t - a) + n
    },
    backOut: function(t, n, e, r, a) {
        return "undefined" == typeof a && (a = 2.0158), e * ((t = t / r - 1) * t * ((a + 1) * t + a) + 1) + n
    },
    backBoth: function(t, n, e, r, a) {
        return "undefined" == typeof a && (a = 1.70158), (t /= r / 2) < 1 ? e / 2 * t * t * (((a *= 1.525) + 1) * t - a) + n : e / 2 * ((t -= 2) * t * (((a *= 1.525) + 1) * t + a) + 2) + n
    },
    bounceIn: function(t, n, e, r) {
        return e - Tween.bounceOut(r - t, 0, e, r) + n
    },
    bounceOut: function(t, n, e, r) {
        return (t /= r) < 1 / 2.75 ? 7.5625 * e * t * t + n : 2 / 2.75 > t ? e * (7.5625 * (t -= 1.5 / 2.75) * t + .75) + n : 2.5 / 2.75 > t ? e * (7.5625 * (t -= 2.25 / 2.75) * t + .9375) + n : e * (7.5625 * (t -= 2.625 / 2.75) * t + .984375) + n
    },
    bounceBoth: function(t, n, e, r) {
        return r / 2 > t ? .5 * Tween.bounceIn(2 * t, 0, e, r) + n : .5 * Tween.bounceOut(2 * t - r, 0, e, r) + .5 * e + n
    }
};
</script>

更多前端效果：https://xue-y.github.io/fore-end/