原生js封装元素运动函数

首先看看演示效果

代码, 函数参数obj为当前想要变动的元素, changeData为想要变动的种类, 例如, func为元素动作结束后想要处理的函数

例如向上面那个演示, 注意: opacity要乘以100, 原因见如下代码

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

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