动画封装函数

我们如何让一个盒子在页面中动起来呢，这就是轮播图等页面动态效果的基础，其实很容易想到，我们使用 setInterval () 定时器即可，我们习惯将其封装到函数中，让有需要的元素直接调用此函数即可，简化了代码

---

封装函数：

<script>
        document.addEventListener('DOMContentLoaded',function(){
            var box=document.querySelector('div');
            var btn=document.querySelector('button');
            function run(obj,long){
                clearInterval(obj.timer)   //排他思想，先清除一次定时器，防止多次点击按钮产生加速的效果
                obj.timer=setInterval(function(){
                    if(obj.offsetLeft>=long){
                        window.clearInterval(obj.timer);
                    }else{
                        obj.style.left=obj.offsetLeft+1+'px';
                    }
                },20)
            }

            btn.addEventListener('click',function(){
                 run(box,3000)
            })
        })

调用时仅需将要执行动画的元素获取过来放入函数参数中，还有目标停止动画的距离即可