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); }