当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS---动画函数封装：设置任意的一个元素,移动到指定的目标位置

JS---动画函数封装：设置任意的一个元素,移动到指定的目标位置

2019年12月13日  | 移动技术网IT编程  | 我要评论
动画函数封装：设置任意的一个元素,移动到指定的目标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div{ width: 200px; height: 200 ...

动画函数封装：设置任意的一个元素,移动到指定的目标位置

 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: red;
      /*脱离文档流*/
      position: absolute;
    }
  </style>
  <script>

    //设置任意的一个元素,移动到指定的目标位置
    function animate(element, target) {
      clearinterval(element.timeid);
      //定时器的id值存储到对象的一个属性中
      element.timeid = setinterval(function () {
        //获取元素的当前的位置,数字类型
        var current = element.offsetleft;
        //每次移动的距离
        var step = 10;
        step = current < target ? step : -step;
        //当前移动到位置
        current += step;
        if (math.abs(current - target) > math.abs(step)) {
          element.style.left = current + "px";
        } else {
          //清理定时器
          clearinterval(element.timeid);
          //直接到达目标
          element.style.left = target + "px";
        }
      }, 20);
    }

  </script>
</head>
<body>


</body>
</html>

 

您可能感兴趣的文章:

如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网