案例需求

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

案例分析

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>筋斗云案例</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         ul,li{
  14.             list-style: none;
  15.         }
  16.         body{
  17.             background-color: black;
  18.         }
  19.         .c-nav{
  20.             width: 900px;
  21.             height: 42px;
  22.             background: #fff url(./img/imgPC端5.04/rss.png) no-repeat right center;
  23.             margin: 100px auto;
  24.             border-radius: 5px;
  25.             position: relative;
  26.         }
  27.         .c-nav ul{
  28.             position: absolute;
  29.         }
  30.         .c-nav li{
  31.             float: left;
  32.             width: 83px;
  33.             text-align: center;
  34.             line-height: 42px;
  35.         }
  36.         .c-nav li a{
  37.             color: #333;
  38.             text-decoration: none;
  39.             display: inline-block;
  40.             height: 42px;
  41.         }
  42.         .c-nav li a:hover{
  43.             color: white;
  44.         }
  45.         .cloud{
  46.             position: absolute;
  47.             left: 0;
  48.             top: 0;
  49.             width: 83px;
  50.             height: 42px;
  51.             background: url(./img/imgPC端5.04/cloud.gif) no-repeat;
  52.         }
  53.     </style>
  54. </head>
  55. <body>
  56.     <div class="c-nav" id="c_nav">
  57.         <span class="cloud"></span>
  58.         <ul>
  59.             <li class="current"><a href="#">首页新闻</a></li>
  60.             <li><a href="#">师资力量</a></li>
  61.             <li><a href="#">活动策划</a></li>
  62.             <li><a href="#">企业文化</a></li>
  63.             <li><a href="#">招聘信息</a></li>
  64.             <li><a href="#">公司简介</a></li>
  65.             <li><a href="#">我是佩奇</a></li>
  66.             <li><a href="#">啥是佩奇</a></li>
  67.         </ul>
  68.     </div>
  69.     <script src="./animate.js"></script>
  70.     <script>
  71.         //获取元素
  72.         var cloud = document.querySelector('.cloud');
  73.         var c_nav = document.querySelector('.c-nav');
  74.         var lis = c_nav.querySelectorAll('li');
  75.         var current = 0;//该变量作为筋斗云的起始位置
  76.         //给所有的li绑定事件
  77.         for(var i = 0; i < lis.length; i++){
  78.             //鼠标经过某个li，把当前li的offsetLeft位置作为目标值
  79.             lis[i].addEventListener('mouseenter',function(){
  80.                 animate(cloud,this.offsetLeft);
  81.             });
  82.             //鼠标离开某个li，就把目标值设为0
  83.             lis[i].addEventListener('mouseleave',function(){
  84.                 animate(cloud,current);
  85.             });
  86.             //如果点击了某个li，就把li当前的位置存储起来，作为筋斗云的起始位置
  87.             lis[i].addEventListener('click',function(){
  88.                 current = this.offsetLeft;
  89.             });
  90.         }
  91.     </script>
  92. </body>
  93. </html>

.