变速动画函数封装

function animate(element, attr, target) {
    //第一步，清除定时器
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
        //获取当前元素的attr这个属性的属性值
        var current = parseInt(getStyle(element, attr));//获取数字类型，进行运算
        //确定每一次走多少步
        var step = (target - current) / 10;//有正负
        //step 取整
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        //走完一次后，当前位置发生改变
        current += step;
        element.style[attr] = current + 'px';
        if (target == current) {
            //清除定时器
            clearInterval(element.timeId);
        }
        //测试代码：
        console.log("目标位置：" + target + ",当前位置：" + current + ",每次移动的步数" + step);
    }, 20);
}

offset系列:

<script>
my$("btn").οnclick=function () {
    //获取div的宽高左边距,右边距
    //console.log(my$("dv1").style.width);//空
    console.log(my$("dv1").offsetWidth);//number类型不加px
    console.log(my$("dv1").offsetHeight);//number类型不加px
    console.log(my$("dv1").offsetLeft);
    console.log(my$("dv1").offsetTop);
}
//点击按钮,获取dv2的left的值
    my$("btn1").οnclick=function () {
        console.log(my$("dv2").offsetLeft);
    }
</script>

 scroll系列：
// scrollWidth：获取元素的实际内容的宽度，如果实际内容没有占满一行，获取的是元素的宽（不加边框）
// scrollHeight：获取元素的实际内容的高，如果实际内容没有占满元素的高度，获取的是元素的高（不加边框）
// scrollTop：卷曲上去的值
// scrollLeft：向左卷曲出去的距离
my$("btn").οnclick=function () {
    console.log(my$("dv").offsetWidth);//有边框
    console.log(my$("dv").offsetHeight);
    console.log(my$("dv").scrollWidth);//实际内容的宽度
    console.log(my$("dv").scrollHeight);
}
//实时获取向上卷曲出去的值---卷曲事件onscroll
my$("dv").οnscrοll=function () {
    console.log(my$("dv").scrollTop);
}