筋头云案例

功能需求:

  1. 鼠标经过某个小li,筋斗云跟到当前小li位置

  2. 鼠标离开这个小li ,筋斗云复原为原来的位置

  3. 鼠标点击了某个小li,筋斗云就会留在点击这个小li的位置

 

 

案例分析:

  1. 利用动画函数做动画效果

  2. 原先筋斗云的起始位置是0

  3. 鼠标经过某个小li,把当前小li的offsetLeft 位置做为目标值即可

  4. 鼠标离开某个小li,就把目标值设为 0

  5. 如果点击了某个小li, 就把li当前的位置存储起来,做为筋斗云的起始位置

注意:ul也要有定位

 window.addEventListener('load', function() {
           // 1. 获取元素
           var cloud = document.querySelector('.cloud');
           var c_nav = document.querySelector('.c-nav');
           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) 鼠标离开就回到起始的位置
               lis[i].addEventListener('mouseleave', function() {
                   animate(cloud, current);
              });
               // (3) 当我们鼠标点击,就把当前位置做为目标值
               lis[i].addEventListener('click', function() {
                   current = this.offsetLeft;
              });
          }
      })

 

posted @ 2020-10-02 12:16  星辰ꦿ.大海  阅读(145)  评论(0编辑  收藏  举报