标签：
move.js
function getStyle(obj, name){ return obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj, false)[name]; }; function move(obj, json, options){ options=options||{}; options.type=options.type||‘buffer‘; options.time=options.time||700; var count=parseInt(options.time/30); var n=0; var start={}; var dis={}; for(var name in json){ if(name==‘opacity‘){ start[name]=Math.round(parseFloat(getStyle(obj, name))*100); }else{ start[name]=parseInt(getStyle(obj, name)); }; dis[name]=json[name]-start[name]; }; clearInterval(obj.timer); obj.timer=setInterval(function (){ n++; for(var name in json){ switch(options.type){ case ‘linear‘: //匀速 var cur=start[name]+dis[name]*n/count; break; case ‘buffer‘: //缓冲 var a=1-n/count; var cur=start[name]+dis[name]*(1-a*a*a); break; case ‘ease-in‘: //加速 var a=n/count; var cur=start[name]+dis[name]*(a*a*a); break; }; if(name==‘opacity‘){ obj.style.filter=‘alpha(opacity:‘+cur+‘)‘; obj.style.opacity=cur/100; }else{ obj.style[name]=cur+‘px‘; }; }; if(n==count){ clearInterval(obj.timer); options.end && options.end(); }; }, 30); }
调用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1{ width: 200px; height: 200px; background: red; position: absolute; left: 0; top: 20px;} </style> </head> <body> <div id="div1"></div> <script src="move.js"></script> <script> window.onload = function(){ var oDiv = document.getElementById(‘div1‘); oDiv.onclick = function(){ move(this, {left: 500, top: 300, opacity:10}, {time:1500, type: ‘buffer‘, end: function(){ alert(1); }}); }; }; </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/carol1987/p/5436947.html
