js之pc端网页特效（3）简单动画1

目录

一、动画原理

二、简单动画函数封装

三、给不同元素记录不同定时器

---

一、动画原理

通过定时器setInterval()不断移动盒子距离，获取盒子当前位置offsetLeft，让盒子在当前位置加上移动距离(自己设定），利用定时器不断重读这个操作，加一个定时器结束的条件。

  var div = document.querySelector('div');
        var time = setInterval(function() {
            if (div.offsetLeft >= 400) { //结束的条件
                //停止动画本质是停止定时器
                clearInterval(time);
            }
            div.style.left = div.offsetLeft + 1 + 'px';//每次移动距离1，left有单位所以拼接px
        }, 30);

二、简单动画函数封装

如果一个页面中有多个元素都需要添加动画，我们一个个添加太麻烦，会有很多代码，我们可以将动画封装为一个函数，我们哪个元素使用就去调用。

封装函数需要两个参数，一个是动画对象，另一个是移动到的距离（目标）

 f