move.js运行插件
Posted 小程序开发
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了move.js运行插件相关的知识，希望对你有一定的参考价值。
代码如下：
<!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> 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); } 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>
以上是关于move.js运行插件的主要内容，如果未能解决你的问题，请参考以下文章