案例：筋斗云动画效果

最新推荐文章于 2024-05-11 10:05:08 发布

httpkaidi

最新推荐文章于 2024-05-11 10:05:08 发布

阅读量152

点赞数

分类专栏： javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/httpkaidi/article/details/121619706

版权

javascript 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

筋斗云动画效果

利用动画函数做动画效果
原先筋斗云起始位置为0
鼠标经过某个li 把当前 li 的 offsetLeft 位置作为目标值即可
鼠标离开某个li ，就把目标值设为0

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

 <style>
      * {
        padding: 0;
        margin: 0;
      }
      li,
      a {
        text-decoration: none;
      }
      .c-nav {
        position: relative;
        width: 1200px;
        height: 60px;
        background: paleturquoise;
        margin: 10px auto;
        text-align: center;
      }
      ul {
        display: flex;
        list-style: none;
        padding: 0 20px;
      }
      .c-nav li {
        width: 120px;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        line-height: 60px;
      }
      .c-nav .first {
        padding-left: 80px;
      }
      span {
        position: absolute;
        left: 0;
        top: 5px;
        width: 120px;
        height: 60px;
        background: url(images/cloud.jpg) no-repeat;
      }
    </style>
    <script src="animate.js"></script>
    <script>
      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 绑定事件
        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;
          });
        }
      });
    </script>
  </head>
  <body>
    <div id="c-nav" class="c-nav">
      <span class="cloud"></span>
      <ul>
        <li class="first"><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>
  </body>

httpkaidi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
案例：筋斗云动画效果

筋斗云动画效果利用动画函数做动画效果原先筋斗云起始位置为0 鼠标经过某个li 把当前 li 的 offsetLeft 位置作为目标值即可鼠标离开某个li ，就把目标值设为0 如果点击了某个li ,就把 li 当前的位置存储起来，作为筋斗云的起始位置 <style> * { padding: 0; margin: 0; } li, a { text-decoration: none
复制链接

扫一扫