筋斗云案例

代码思路

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

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

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

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

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

HTML代码

<div id="c_nav" class="c-nav">
    <span class="cloud"></span>
    <ul>
      <li class="current"><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>

CSS代码

<style>
    * {
      margin: 0;
      padding: 0
    }

    ul {
      list-style: none;
    }

    body {
      background-color: black;
    }

    .c-nav {
      width: 900px;
      height: 42px;
      background: #fff url(img/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;
    }

    .c-nav li.current a {
      color: #0dff1d;
    }

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

JS代码

<script>
    window.addEventListener('load', function () {
      // 1.获取元素
      let cloud = document.querySelector('.cloud');
      let c_nav = document.querySelector('.c_nav');
      let lis = document.querySelectorAll('li');
      // 2. 给所有的小li绑定事件
      // 这个current做为筋斗云的起始位置
      let current = 0;
      for (let 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;
        })
      }
    })
  </script>