原生js封裝元素運動函數__javascript

首先看看示範效果
代碼, 函數參數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);}