原生JS编写多值运动框架
多值运动框架
function movejs(obj,json,time,callback) { var sTime=new Date(),//初始时间 sVal={}, //初始值 s, tVal={}; //需要运动多少 for (var attr in json){ sVal[attr]=parseFloat(getCsss(obj)[attr]); tVal[attr]=json[attr]-sVal[attr]; } ~function m() {
// 时间差 var timeDiff=new Date()-sTime;
// 判断时间差,何时终止 timeDiff>=time?timeDiff=time:requestAnimationFrame(m);
// 此框架有对透明度的兼容 for (attr in json){ if(attr==="opacity"){ s=tVal[attr]*timeDiff/time+sVal[attr]; }else{ s=tVal[attr]*timeDiff/time+sVal[attr]+"px"; } obj.style[attr]=s; }
// 运动结束后可以传入一个回调函数,没有也可以 if(timeDiff>=time){ callback&&callback.call(obj); } }(); } //获取样式 function getCsss(obj) { return obj.currentStyle ||getComputedStyle(obj); }
以上代码有不对的欢迎指出,谢谢。
路漫漫其修远兮,吾将上下而求索

浙公网安备 33010602011771号