欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS---案例:移动元素,封装动画函数

程序员文章站 2022-07-02 12:48:43
案例:移动元素,封装动画函数 1. div要移动,要脱离文档流 position:absolute 2. 如果样式的代码是在style的标签中设置,外面是获取不到 3. 如果样式的代码是在style的属性设置,外面是可以获取 4. 获取div的当前位置 console.log(my$("dv").o ......

案例:移动元素,封装动画函数

1. div要移动,要脱离文档流---position:absolute
2. 如果样式的代码是在style的标签中设置,外面是获取不到
3. 如果样式的代码是在style的属性设置,外面是可以获取
4. 获取div的当前位置
  console.log(my$("dv").offsetleft);

 

动画函数animate封装

<!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: pink;
      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>

    //点击第一个按钮,移动到400px
    my$("btn1").onclick = function () {
      animate(my$("dv"), 400);
    };
    //点击第二个按钮,移动到800px
    my$("btn2").onclick = function () {
      animate(my$("dv"), 800);
    };

    //动画函数animate封装
    function animate(element, target) {
      //先清理定时器
      clearinterval(element.timeid);
      //一会要清理定时器 (只产生一个定时器)
      element.timeid = setinterval(function () {
        //获取div当前位置
        var current = element.offsetleft; //数字类型,没有px
        //div每移动多少像素---步数
        var step = 10;
        step = current < target ? step : -step;
        //每次移动后的距离
        current += step;
        //判断当前移动后的位置,是否达到目标位置
        if (math.abs(target - current) > math.abs(step)) {
          element.style.left = current + "px";
        } else {
          //清理定时器
          clearinterval(element.timeid);
          element.style.left = target + "px";
        }
      }, 20);
    }

  </script>
</body>

</html>