动画案例：滑动块

最新推荐文章于 2022-11-10 20:16:59 发布

httpkaidi

最新推荐文章于 2022-11-10 20:16:59 发布

阅读量155

点赞数

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

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

版权

javascript 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

动画案例：滑动块

案例效果：
鼠标经过就将盒子滑动到右侧，同时外盒子内容箭头指向变化
鼠标离开就将盒子滑动到左侧，同时外盒子内容箭头指向变化回来

思路：动画封装函数，回调函数

 <style>
      .sliderbar {
        position: relative;
        float: right;
        margin-top: 100px;
        height: 40px;
        width: 60px;
        background: rgb(116, 157, 173);
      }
      span {
        position: absolute;
        top: 0;
        width: 80px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: rgb(116, 157, 173);
      }

      .con {
        position: absolute;
        left: 0px;
        top: 0;
        height: 40px;
        width: 160px;
        text-align: center;
        line-height: 40px;
        background-color: #37b642;
        cursor: pointer;
        z-index: -1;
      }
    </style>
    <script src="animate.js"></script>
  </head>

  <body>
    <div class="sliderbar">
      <span>←</span>
      <div class="con">问题反馈</div>
    </div>
    <script>
      //1.获取元素
      var sliderbar = document.querySelector(".sliderbar");
      var con = document.querySelector(".con");
      //当鼠标经过sliderbar 就让con这个盒子滑动到左侧
      //当鼠标离开sliderbar 就让con盒子滑动到右侧
      sliderbar.addEventListener("mouseenter", function () {
        animate(con, -160, function () {
          //当动画执行完毕，就把←改为→
          sliderbar.children[0].innerHTML = "→";
        });
      });
      sliderbar.addEventListener("mouseleave", function () {
        animate(con, 10, function () {
          sliderbar.children[0].innerHTML = "←";
        });
      });
    </script>
  </body>

JS文件在动画函数封装文件中