【前端案例】21 - 案例：筋头云案例

案例演示

筋斗云导航栏

功能分析

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

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

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

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

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

代码实现

css

* {
      margin: 0;
      padding: 0
    }

    ul {
      list-style: none;
    }

    body {
      background-color: black;
    }

    .c-nav {
      width: 900px;
      height: 42px;
      background: #fff url(images/rss.png) no-repeat right center;
      margin: 100px auto;
      border-radius: 5px;
      position: relative;
    }

    .c-nav ul {
      position: absolute;
    }

    .c-nav li {
      float: left;
      width: 83px;
      text-align: center;
      line-height: 42px;
    }

    .c-nav li a {
      color: #333;
      text-decoration: none;
      display: inline-block;
      height: 42px;
    }

    .c-nav li a:hover {
      color: white;
    }

    .cloud {
      position: absolute;
      left: 0;
      top: 0;
      width: 83px;
      height: 42px;
      background: url(images/cloud.gif) no-repeat;
    }

html

<div id="c_nav" class="c-nav">
  <span class="cloud"></span>
  <ul>
    <li><a href="#">首页新闻</a></li>
    <li><a href="#">师资力量</a></li>
    <li><a href="#">活动策划</a></li>
    <li><a href="#">企业文化</a></li>
    <li><a href="#">招聘信息</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">我是佩奇</a></li>
    <li><a href="#">啥是佩奇</a></li>
  </ul>
</div>

javascript :在页面加载完成之后再执行

 window.addEventListener('load', () => {

      // 获取元素节点
      let cloud = document.querySelector('.cloud');
      let c_nav = document.querySelector('.c-nav');
      let lis = c_nav.querySelectorAll('li');

      // 使用for循环为每一个li设置点击事件
      let current = 0; // 用于记录点击的时候此li的位置
      for (let i = 0; i < lis.length; i++) {
        /**
         * 当鼠标进入到 li 的时候
         */
        lis[i].addEventListener('mouseenter', () => {
          animation(cloud, lis[i].offsetLeft);
        })

        /**
         * 当鼠标离开的时候 回到上一个点击停留的位置
         */
        lis[i].addEventListener('mouseleave', () => {
          animation(cloud, current);
        })

        /**
         * 当点击的时候记录一下当前点击的li的位置
         */
        lis[i].addEventListener('click', () => {
          current = lis[i].offsetLeft;
        })
      }

    })

javascript实现移动动画

function animation(ele, target, callback) {
  // 在每次设置定时器之前清除对象中的默认定时器
  // 注意1
  clearInterval(ele.timer);
  ele.timer = setInterval(() => {
    // 计算缓动动画 步长
    let step = (target - ele.offsetLeft) / 10;
    // 判断如果是正值就向上取整 ， 如果是负值就向下取整
    // 注意2
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    // 移动盒子
    ele.style.left = ele.offsetLeft + step + 'px';

    // 判断当前是否超出目标值 如果超出就清除定时器
    if (ele.offsetLeft === target) {
      clearInterval(ele.timer);
      // 在清除定时器之后 需要执行一个回调函数
      // 注意3
      if (callback) {
        callback();
      }
    }
  }, 10);
}