原生js封装元素运动函数

首先看看演示效果

例子

代码

函数参数obj为当前想要变动的元素, changeData为想要变动的种类, 例如, func为元素动作结束后想要处理的函数
例如向上面那个演示, **注意: ** opacity要乘以100, 原因见如下代码

var div = document.getElementsByClassName('demo')[0];
    startMove(div, {width:200 ,  height:200, left:100, top:100, opacity: 50}, function(){});

/*
* 运动函数模型
 */

function startMove(obj, changeData, func) {
    clearInterval(obj.timer);
    var iCurValue = 0;
    var iSpeed = 0;
    var bStop;
    
    obj.timer = window.setInterval(function () {
         bStop = true;//判断当前所有动作是否全部执行完毕
        for(var name in changeData) {
            console.log(name, changeData[name]);
            if(name === 'opacity') {//对透明度进行处理时注意要扩大倍数, 否则容易造成bug
                iCurValue = parseFloat(getStyle(obj, name)) * 100;
            }else {
                iCurValue = parseInt(getStyle(obj, name));
            }
            iSpeed = (changeData[name] - iCurValue) / 7;//缓冲运动效果
            if(iSpeed > 0) {
                iSpeed = Math.ceil(iSpeed);
            }else{
                iSpeed = Math.floor(iSpeed);
            }
            if(name === 'opacity') {
                obj.style.opacity = (iCurValue + iSpeed) / 100;         
            }else{
                obj.style[name] = iCurValue + iSpeed + 'px';
            }
            if(iCurValue !== changeData[name]) {
                bStop = false;
            }
        }
        if(bStop) {
            //整个动作执行完毕
            clearInterval(obj.timer);
            func();//当全部动作执行完毕之后, 执行回调函数.
        }
    }, 30);
}