动画函数（匀速与变速）

最新推荐文章于 2024-01-15 11:52:39 发布

yyy_wj

最新推荐文章于 2024-01-15 11:52:39 发布

阅读量689

点赞数

本文链接：https://blog.csdn.net/yyy_wj/article/details/97924146

版权

本文介绍了匀速和变速动画函数的应用。在匀速动画部分，通过案例展示了移动元素的过程，并探讨了如何使元素能够进行负向移动。接着，文章详细讲解了变速动画函数的封装方法。

摘要由CSDN通过智能技术生成

1、匀速动画函数

案例：移动元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>

    * {
      margin: 0;
      padding: 0;
    }

    input {
      margin-top: 20px;
    }

    div {
      margin-top: 30px;
      width: 200px;
      height: 100px;
      background-color: green;
      position: absolute;
    }
  </style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //div要移动,要脱离文档流---position:absolute
  //如果样式的代码是在style的标签中设置,外面是获取不到
  //如果样式的代码是在style的属性设置,外面是可以获取

  //点击第一个按钮移动到400px

  my$("btn1").onclick = function () {
    //一会要清理定时器(只产生一个定时器)
   var timeId= setInterval(function () {
      //获取div的当前的位置
      var current = my$("dv").offsetLeft;//数字类型,没有px
      //div每次移动多少像素---步数
      var step = 9;
      //每次移动后的距离
      current += step;
     //判断当前移动后的位置是否到达目标位置
      if(current<=400){
        my$("dv").style.left=current+"px";
      }else{
        //清理定时器
        clearInterval(timeId);
      }
    }, 20);
  };
  //点击第二个按钮移动到800px