设为首页收藏本站订阅更新

无忧脚本

 找回密码
 加入无忧

QQ登录

只需一步,快速开始

搜索
查看: 2656|回复: 1

帮忙看下这段动画写的如何?

[复制链接]
发表于 2012-9-29 16:42:16 | 显示全部楼层 |阅读模式
写js写的比较少,一直没办法提高,各位大大帮忙看下,写的如何,最好能提出改进意见。
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. .smart_style_1{
  5. position: absolute;
  6. background-color:#6FB7B7;
  7. width:100px;
  8. height:100px;
  9. left:1000px;
  10. }
  11. .smart_style_2{
  12. position: absolute;
  13. background-color:gray;
  14. width:10px;
  15. height:10px;
  16. left:1000px;
  17. }
  18. #log{
  19. background-color:#EAC100;
  20. position:absolute;
  21. top:500px;
  22. height:80px;
  23. width:100%;
  24. }
  25. body{margin:0; padding:0;}
  26. </style>
  27. <script>
  28. smart_g={
  29. $_ob:function(_id,_cssname)
  30. {
  31. ob=document.createElement("span");
  32. ob.setAttribute("id",_id);
  33. ob.className=_cssname;
  34. document.body.appendChild(ob);
  35. return ob;
  36. },
  37. //获取dom对象
  38. $_id:function(_id){return document.getElementById(_id);},
  39. //设置css
  40. $_style:function(_id,_cssname){this.$_id(_id).className=_cssname;},
  41. //log
  42. $_log:function(log){this.$_id('log').innerHTML='<strong>任务日志:</strong></br>'+log+'</br>';},
  43. $_m:function(_id,endpoint_x, endpoint_y,r){
  44.         obj=this.$_id(_id);
  45.         xmove=true;ymove=true;
  46.         if(parseFloat(obj.style.left.replace('px',''))<endpoint_x)
  47.         {  
  48.                 ib = endpoint_x-parseFloat(obj.style.left.replace('px',''));
  49.                 ib<=r?(obj.style.left=(parseFloat(obj.style.left.replace('px',''))+1)+'px'):(obj.style.left=(parseFloat(obj.style.left.replace('px',''))+r)+'px');
  50.         }else if(parseFloat(obj.style.left.replace('px',''))>endpoint_x)
  51.         {
  52.                 ib = parseFloat(obj.style.left.replace('px',''))-endpoint_x;
  53.                 ib<=r?(obj.style.left=(parseFloat(obj.style.left.replace('px',''))-1)+'px'):(obj.style.left=(parseFloat(obj.style.left.replace('px',''))-r)+'px');
  54.         }else
  55.         {
  56.         xmove=false;
  57.         }
  58.         if(parseFloat(obj.style.top.replace('px',''))<endpoint_y)
  59.         {  
  60.                 ib=endpoint_y-parseFloat(obj.style.top.replace('px',''));
  61.                 ib<=r?(obj.style.top=(parseFloat(obj.style.top.replace('px',''))+1)+'px'):(obj.style.top=(parseFloat(obj.style.top.replace('px',''))+r)+'px');
  62.         }else if(parseFloat(obj.style.top.replace('px',''))>endpoint_y)
  63.         {
  64.                 ib=parseFloat(obj.style.top.replace('px',''))-endpoint_y;
  65.                 ib<=r?(obj.style.top=(parseFloat(obj.style.top.replace('px',''))-1)+'px'):(obj.style.top=(parseFloat(obj.style.top.replace('px',''))-r)+'px');
  66.         }else
  67.         {
  68.         ymove=false;
  69.         }
  70.         if(!xmove && !ymove)
  71.         {
  72.         fun = 'smart_g.$_m("'+_id+'",'+endpoint_x+','+endpoint_y+','+r+')';
  73.          smart_g.$_tasks.del(fun);
  74.         }
  75. },
  76. $_mstep:function(_id,endpoint_x,endpoint_y,r,tasks){
  77.         obj=this.$_id(_id);
  78.         xmove=true;ymove=true;
  79.         if(parseFloat(obj.style.left.replace('px',''))<endpoint_x)
  80.         {  
  81.                 ib = endpoint_x-parseFloat(obj.style.left.replace('px',''));
  82.                 ib<=r?(obj.style.left=(parseFloat(obj.style.left.replace('px',''))+1)+'px'):(obj.style.left=(parseFloat(obj.style.left.replace('px',''))+r)+'px');
  83.         }else if(parseFloat(obj.style.left.replace('px',''))>endpoint_x)
  84.         {
  85.                 ib = parseFloat(obj.style.left.replace('px',''))-endpoint_x;
  86.                 ib<=r?(obj.style.left=(parseFloat(obj.style.left.replace('px',''))-1)+'px'):(obj.style.left=(parseFloat(obj.style.left.replace('px',''))-r)+'px');
  87.         }else
  88.         {
  89.         xmove=false;
  90.         }
  91.         if(parseFloat(obj.style.top.replace('px',''))<endpoint_y)
  92.         {  
  93.                 ib=endpoint_y-parseFloat(obj.style.top.replace('px',''));
  94.                 ib<=r?(obj.style.top=(parseFloat(obj.style.top.replace('px',''))+1)+'px'):(obj.style.top=(parseFloat(obj.style.top.replace('px',''))+r)+'px');
  95.         }else if(parseFloat(obj.style.top.replace('px',''))>endpoint_y)
  96.         {
  97.                 ib=parseFloat(obj.style.top.replace('px',''))-endpoint_y;
  98.                 ib<=r?(obj.style.top=(parseFloat(obj.style.top.replace('px',''))-1)+'px'):(obj.style.top=(parseFloat(obj.style.top.replace('px',''))-r)+'px');
  99.         }else
  100.         {
  101.         ymove=false;
  102.         }
  103.         if(!xmove && !ymove)
  104.         {
  105.         fun = 'smart_g.$_mstep("'+_id+'",'+endpoint_x+','+endpoint_y+','+r+',"'+tasks+'")';
  106.          smart_g.$_tasks.del(fun);
  107.          if(tasks!='')
  108.                 this.$_movestep(_id,tasks);
  109.         }
  110. },
  111. $_tasks:{
  112.     taskflag: -1,
  113.     taskFun: '',
  114.     task: '',
  115.     time: 0,
  116.     init: function(obj, t) {
  117.         task = obj;
  118.         task.time = t;
  119.     },
  120.     add: function(fun) {
  121.         task.taskFun += fun + ';';
  122.         task.start();
  123.     },
  124.     del: function(fun) {
  125.         task.stop();
  126.         task.taskFun = task.taskFun.replace(fun + '', '');
  127.         task.start();
  128.     },
  129.     start: function() {
  130.         task.stop();
  131.         if (task.taskFun != '') task.taskflag = setInterval(task.taskFun, task.time);
  132.     },
  133.     stop: function() {
  134.         clearInterval(task.taskflag);
  135.     }
  136. },
  137. //动起来
  138. $_move:function(_id, endpoint_x, endpoint_y,r){
  139.         obj=this.$_id(_id);
  140.         fun = 'smart_g.$_m("'+_id+'",'+endpoint_x+','+endpoint_y+','+r+')';
  141.         obj.style.left=obj.offsetLeft+'px';
  142.         obj.style.top=obj.offsetTop+'px';
  143.         this.$_tasks.add(fun);
  144.         return fun;
  145.         },
  146. $_movestep:function(_id,tasks){
  147.         this.$_log("任务:"+tasks);//测试
  148.         obj=this.$_id(_id);
  149.         ltasks = tasks.split(',');
  150.         endpoint_x=ltasks[0];
  151.         endpoint_y=ltasks[1];
  152.         r=ltasks[2];
  153.         task_=endpoint_x+','+endpoint_y+','+r+',';
  154.         tasks = tasks.substring(task_.length,tasks.length);
  155.         fun = 'smart_g.$_mstep("'+_id+'",'+endpoint_x+','+endpoint_y+','+r+',"'+tasks+'")';
  156.         obj.style.left=obj.offsetLeft+'px';
  157.         obj.style.top=obj.offsetTop+'px';
  158.         this.$_tasks.add(fun);
  159.         return fun;
  160.         }
  161. }
  162. window.onload=function(){
  163. smart_g.$_tasks.init(smart_g.$_tasks,5);
  164. smart_g.$_ob('name1','smart_style_1');
  165. smart_g.$_movestep('name1','700,400,2,0,0,5,300,56,1,20,200,1');
  166. smart_g.$_ob('name2','smart_style_2');
  167. smart_g.$_movestep('name2','100,400,2,0,0,1,500,56,5,20,200,2');
  168. smart_g.$_ob('name3','smart_style_2');
  169. smart_g.$_movestep('name3','600,400,2,10,0,1,500,56,5,120,200,4,20,400,1,300,500,3,1,1,2,110,200,5');
  170. };
  171. </script>
  172. </head>
  173. <body>
  174. <h1>动画引擎演示</h1>
  175. <span id="log">
  176. </span>
  177. </body>
  178. </html>
复制代码


发表于 2012-10-22 13:42:52 | 显示全部楼层
要求啥的都没有。。不想看代码
您需要登录后才可以回帖 登录 | 加入无忧

本版积分规则

小黑屋|手机版|Archiver|无忧脚本 ( 苏ICP备05080427号 )|值班电话:027-62300445   鄂公网安备 42011102000433号

GMT+8, 2017-11-23 19:09 , Processed in 0.089872 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表