变速动画函数封装增加任意一个属性

Posted 2021-01-24 lujieting0

//计算后的样式属性---- 一个元素的任意的一个样式属性值
function getStyle(element,attr) {
    //判断这个浏览器是否支持这个方法
    return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
//匀速动画
function animate(element,attr,target) {  //element--元素   attr--属性名字   target--目标位置
    //清理定时器
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
        //获取元素当前位置
        var current=parseInt(getStyle(element,attr));//数字类型
        //移动的步数
        var step=(target-current)/10;
        step=step>0?Math.ceil(step):Math.floor(step);
        current+=step;
        element.style[attr]=current+"px";
        if(current==target){
            //清理计时器
            clearInterval(element.timeId);
        }22 变速动画函数封装增加任意一个属性