动画的种类
闪现
匀速
缓动
动画原理
盒子的位置 = 盒子本身所在的位置+步长。
缓动动画
三个函数
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获取的是具体值(赋值的时候也是直接赋值)