关于 筋斗云 js + css3 js / 面向过程 （下面的） 面向对象
导航栏 筋斗云 鼠标 划过 点击
可以tools.linearMove 方法 匀速
实现缓冲 tools.move
思路 速度为当前距离的1/10 距离小于10后每像素的走（上下取整实现） 则程序一定刚好走完

HTML css自设

<div class="nav" id="nav">
    <span class="cloud" id="cloud"></span>
    <ul id="box">
        <li>首页新闻</li>
        <li>千锋师资</li>
        <li>千锋活动策划</li>
        <li>企业文化</li>
        <li>招聘信息</li>
        <li>公司简介</li>
        <li>上海校区</li>
        <li>广州校区</li>
    </ul>
</div>

js 内部

划过离开回位
点击留 索引记录点击的当前索引

<script src = "xxx/tools.js"></script>
<script>
        // 需求 每个li元素 span
        var aLi = document.querySelector("#box").children;//querySelectorAll("li");
        var cloud = document.querySelector("span");
        var index = 0;//记录当前索引
        //每个li的事件 遍历
        //li之前的宽度是相同的
        for(let i =  0; i < aLi.length; i++){
               aLi[i].onmouseenter = function() {
                        tools.move(obj,"left",i * aLi[0].offsetWidth);//  移动到当前li 的位置
                } 
                aLi.onmouseleave = function() {
                        tools.move(obj,"left",index * aLi[0].offsetWidth);//回到点击索引的li位置
                }
                aLi.onclick = function() {
                        //只记录下标索引 因为如果发生点击事件 一定在离开事件之前发生 可以生效
                        index = i;
                }
        }
        
</script>

js tools.move 外部封装体

缓冲 即速度衰减 速度为当前距离的1/10
速度 在定时器内部

var tools = {
        /* 功能 对象缓冲运动
          obj <Object> DOM 运动对象
          attr (attribute 属性) <String> 对象运动属性
          end <number>  结束位置
        */
        move : function(obj,attr,end) {
                clearInterval(obj.timer);//清楚上一次定时器
                var start = parseInt(this.getStyle(obj,attr)); //获取的有单位 剔除
                //定时器运动
                obj.timer = setInterval(function() {
                        var distance = end - start;
                        //正向 负向 分别上下取整
                        var speed = distance > 0 ? Math.ceil(distance/10) : Math.floor(distance/10);
                        start += speed;
                         obj.style[attr] = start + "px";
                        //速度小于1 取整为1 一定刚好走完
                        if(start === end){
                                clearInterval(obj.timer);
                        }
                },20);
        }
}