动画函数封装——动画原理

最新推荐文章于 2024-09-02 17:34:07 发布

daiwei_ck

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量73

点赞数

文章标签： javascript ecmascript Powered by 金山文档

本文链接：https://blog.csdn.net/m0_58748792/article/details/128841073

版权

我们先简单的做一个HTML、CSS页面。

<style>
    body{
      background-color: #ccc;
    }
    div {
      position: absolute;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div></div>
<body>

在做动画之前我们首先要知道他的核心原理以及实现步骤：

核心原理：通过定时器setInterval() 不断移动盒子位置。

实现步骤：

获得盒子当前位置（获取位置用div.offsetLeft）

让盒子在当前位置加上1个移动距离（更改位置用div.style.left）

利用定时器不断重复这个操作

加一个结束定时器的条件

注意此元素需要添加定位，才能使用element.style.left

js代码如下：

<script>
    var div = document.querySelector('div');
    var timer = setInterval(function () {
    div.style.left = div.offsetLeft + 5 + 'px';
    }, 30)
</script>

结果如下：

红色方块会超出页面范围，大家想想这是为什么呢？

我们上面这段代码只是添加了定时器，但是没有设置停止动画（停止动画本质就是停止计时器），所以才会出现这样的情况，为了避免这样的事发生，我们添加一个判断语句来设置。

<script>
    var div = document.querySelector('div');
    var timer = setInterval(function () {
      if (div.offsetLeft >= 400){
        clearInterval(timer);
      }
    div.style.left = div.offsetLeft + 10 + 'px';
    }, 30)
  </script>

当距离左边距400px时就会停止动画达到我们想要的结果。

daiwei_ck

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动画函数封装——动画原理

我们上面这段代码只是添加了定时器，但是没有设置停止动画（停止动画本质就是停止计时器），所以才会出现这样的情况，为了避免这样的事发生，我们添加一个判断语句来设置。让盒子在当前位置加上1个移动距离（更改位置用div.style.left）获得盒子当前位置（获取位置用div.offsetLeft）通过定时器setInterval() 不断移动盒子位置。当距离左边距400px时就会停止动画达到我们想要的结果。我们先简单的做一个HTML、CSS页面。在做动画之前我们首先要知道他的。核心原理以及实现步骤。
复制链接

扫一扫