筋头云案例

<script>
      window.addEventListener("load", function () {
        // 1. 获取元素
        var c_nav = document.querySelector(".c-nav");
        var cloud = document.querySelector(".cloud");
        var lis = c_nav.querySelectorAll("li");
        // 2. 给所有的小li绑定事件
        // 这个current 作为筋斗云的起始位置
        var current = 0;
        for (var i = 0; i < lis.length; i++) {
          // (1) 鼠标经过把小li 的位置作为目标值
          lis[i].addEventListener("mouseenter", function () {
            animate(cloud, this.offsetLeft);
          });
          // (2) 鼠标离开就复原为0
          lis[i].addEventListener("mouseleave", function () {
            animate(cloud, current);
          });
          // (3) 当我们鼠标点击，就把当前位置作为目标值
          lis[i].addEventListener("click", function () {
            current = this.offsetLeft;
          });
        }
      });
    </script>