筋头云案例 - 码农教程

案例：筋头云案例

利用动画函数做动画效果
原先筋斗云的起始位置是0
鼠标经过某个小li，把当前小li的offsetLeft 位置做为目标值即可
鼠标离开某个小li，就把目标值设为 0
如果点击了某个小li，就把li当前的位置存储起来，做为筋斗云的起始位置

<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>