缓动动画原理

 

offset 偏移量  只读不能写

一， offsetLeft/offsetTop 返回距离上级盒子（带有定位的左边/顶端的距离（若无定位，则以浏览器为标准）

 offsetLeft和style.left的区别

(1) style.left只能获取行内样式，offsetLeft 可以获取行内样式和内嵌样式

(2) offsetLeft 只读，style.left可读可写

(3) offsetLeft是数值，style.left是字符串并且有单位px，style.left为空时返回空字符串，offsetLeft返回0；

(4)offsetLeft可以返回没有定位盒子的距离左侧的距离（以浏览器为标准），而style.left不可以

(5)offsetLeft以border左上角为基准，style.left以margin左上角为基准

二，offsetWidth/offsetHeight  获取元素自身的宽和高（不包括外边距）

      offsetWidth/offsetHeight=Width/Height+padding+border；

 offsetHeight和style.height的区别

（1） style.height只能获取行内样式，offsetHeight可以获取行内样式和内嵌样

（2） style.height是字符串（而且带单位），offsetHeight是数值

（3）style.height可读可写，offsetHeight是只读属性

 

移动动画的原理=盒子本身的位置+步长

缓动动画的原理主要是通过offset系列的属性实现的 ：

第一步： 设定步长  ；

第二步：每一次移动后，盒子距离目标原来越近，逐渐减小步长，达到缓动的效果；

缓动动画函数封装代码如下：

 function action(ele,target) {
        //要用定时器，先清定时器
        clearInterval(ele.timer);
        ele.timer=setInterval(function () {
            //设置步长
            var step=(target-ele.offsetLeft)/10;
            //二次处理步长
            step=step>0?Math.ceil(step):Math.floor(step);
            //缓动滑动
            ele.style.left=ele.offsetLeft+step+"px";
            //判断是否要清除定时器
            if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
                ele.style.left=target+"px";
                clearInterval(ele.timer);
                console.log(ele.offsetLeft);
            }
        },30);
    }