变速函数

变速函数

*
**1* offset系列**：
在style标签中的属性，不能通过style.属性获取到，只能通过offset获取
*
* offsetWidth：获取元素的宽（width+padding+border）
* offsetHeight：获取元素的高（有边框）
* offsetLeft：获取元素距离左边的距离
* offsetRight：获取元素距离右边的距离
*
* offsetLeft具体的值：
* 1. 子元素和父元素都没有脱离文档流：
* 子元素的offsetLeft=父容器的margin值+父容器的padding值+父容器的border值+当前元素的margin的值
*
* 2. 子元素父元素脱离文档流
* 子元素的offsetLeft=自己的left+自己margin，如果没有设置left，那么就是父元素的padding+自己的margin
*
* 3. 父元素没有脱离文档流，子元素脱离文档流
* 如果子元素有left值，offsetLeft=自己的left+自己margin，
* 如果没有left值，子元素的offsetLeft=父容器的margin值+父容器的padding值+父容器的border值+当前元素的margin的值
*

2 scroll系列：
* scrollWidth：获取元素的实际内容的宽度，如果实际内容没有占满一行，获取的是元素的宽（不加边框）
* scrollHeight：获取元素的实际内容的高，如果实际内容没有占满元素的高度，获取的是元素的高（不加边框）
* scrollTop：卷曲上去的值
* scrollLeft：向左卷曲出去的距离
*3变速函数

//移动函数--变速速
function animate(element, target) {
    //第一步，清除定时器
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
        //获取当前元素的当前位置
        var current = element.offsetLeft;
        //确定每一次走多少步
        var step = (target - current) / 10;//有正负
        //step 取整
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        //走完一次后，当前位置发生改变
        current += step;
        element.style.left = current + 'px';
        //判断否到当前位置
        if (target == current) {
            //清除定时器
            clearInterval(element.timeId);
        }
        //测试代码：
        console.log("目标位置：" + target + ",当前位置：" + current + ",每次移动的步数" + step);
    }, 20);
}