动画和封装

动画的种类

闪现
匀速
缓动

动画原理

盒子的位置 = 盒子本身所在的位置+步长。

缓动动画

三个函数

Math.ceil() 向上取整
Math.floor() 向下取整
Math.round() 四舍五入

缓动动画原理

leader=leader+(target-leader)/10;
盒子位置=盒子本身位置+（目标位置-盒子本身位置）/10

动画原理 = 盒子位置 + 步长（步长越来越小）。

体验缓动动画

    var btn=document.getElementsByTagName("button")[0];
            var box=document.getElementsByTagName("div")[0];
            btn.onclick=function(){
                setInterval(function(){
                    box.style.left=box.offsetLeft+(400-box.offsetLeft)/10+"px"
                },30)
            }

offsetLeft和style.left的值的获取问题

获取盒子距离左侧具有定位的父盒子的距离（没有body），四舍五入取整
Style.left获取的是具体值（赋值的时候也是直接赋值）