筋头云案例

功能需求:

  1. 鼠标经过某个小li,筋斗云跟到当前小li位置
  2. 鼠标离开这个小li ,筋斗云复原为原来的位置
  3. 鼠标点击了某个小li,筋斗云就会留在点击这个小li的位置

案例分析:

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

注意:ul也要有定位

代码语言:javascript
复制
 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;
                });
            }
        })
​