function getStyle(obj,name){ //获取样式函数 return obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj,false)[name]; } //运动函数,json参数里设置样式,options参数设置效果选项 function startMove(obj,json,options){ var start={}; //定义空对象 var dis={}; options=options || {}; //option参数可不写 options.time=options.time || 700; options.type=options.type || 'ease-out'; for(var name in json){ if(name=='opacity'){ //获取不透明度样式 start[name]=Math.round(parseFloat(getStyle(obj,name)))*100; }else{ switch(name){ //若用户未填写初始left及top值,自动计算元素left及top值 case 'left': start[name]=obj.offsetLeft; break; case 'top': start[name]=obj.offsetTop; break; default: start[name]=parseInt(getStyle(obj,name)); } } dis[name]=json[name]-start[name]; } var count=parseInt(options.time/30); //走了多少次 var n=0; //用来计数,当前走到第n次 clearInterval(obj.timer); //将timer加到obj上,以便多个元素能够同时使用计时器 obj.timer=setInterval(function(){ obj.style.margin=0; //清除margin带来的影响 n++; for(var name in json){ switch(options.type){ case 'linear': //匀速 var cur=start[name]+dis[name]*n/count; break; case 'ease-in': //加速 var a=n/count; var cur=start[name]+dis[name]*(a*a*a); break; case 'ease-out': //减速 var a=1-n/count; var cur=start[name]+dis[name]*(1-a*a*a); break; } if(name=='opacity'){ obj.style.opacity=cur/100; obj.style.filter='alpha(opacity='+cur+')'; }else{ obj.style[name]=cur+'px'; } } if(n==count){ //运动到指定位置时中止计时器 clearInterval(obj.timer); options.end && options.end(); } },30); }