js动画

最近写了一个动画效果。
例子中我只写了一个效果，增加高度，有兴趣的朋友可以自己在添加其他的效果。

1. function Animation(obj){   
   
2.     this.ele = obj.ele;   
   
3.     this.maxheight = obj.maxheight||26;   
   
4.     this.minheight = obj.minheight||0;   
   
5.     this.delay = obj.delay || 0;   
   
6.       
   
7.     this.inter = null;   
   
8.     this.time = obj.time||200;   
   
9.     this.callback = obj.callback;   
   
10.     this.type = obj.type || "addh";   
    
11.     this.initialize.apply(this, arguments);   
    
12. };   
    
13.   
    
14. Animation.prototype={   
    
15.     constructor:Animation,   
    
16.     initialize:function(obj){   
    
17.         this.events = [];//动画状态数组   
    
18.         this.inittime = this.time;   
    
19.     },   
    
20.     start:function(){   
    
21.         this.events.push(this.type);   
    
22.         /*  
    
23.         判断主循环 是否在执行 在执行的话就 只保存需要执行的状态   
    
24.         这样就可以保证一个dom只有一个 主循环 从而保证不会出现死循环  
    
25.         */  
    
26.         if(this.inter == null){   
    
27.             this.startAnimate();   
    
28.         }   
    
29.     },   
    
30.     startAnimate:function(){   
    
31.         this.time = this.inittime;   
    
32.         var t = this;   
    
33.         var type = t.events.pop();//获取最后一个动画   
    
34.         t.events = [];   
    
35.         //主循环   
    
36.         t.inter = setInterval(function(){   
    
37.             switch(type){   
    
38.                 case "addh":   
    
39.                     t.addh();   
    
40.                 break;   
    
41.                 case "delh":   
    
42.                     t.delh();   
    
43.                 break;   
    
44.             }   
    
45.         },50);   
    
46.     },   
    
47.     callBack:function(){   
    
48.         var len = this.events.length;   
    
49.         clearInterval(this.inter);   
    
50.         var t = this;   
    
51.         if(len == 0){   
    
52.             this.inter = null;   
    
53.             if(typeof this.callback == "function"){   
    
54.                 setTimeout(function(){   
    
55.                     t.callback();   
    
56.                 },this.delay);   
    
57.             }   
    
58.         }   
    
59.         else{   
    
60.             setTimeout(function(){   
    
61.                 t.startAnimate();   
    
62.             },this.delay);   
    
63.         }   
    
64.     },   
    
65.     addh:function(){   
    
66.         var h = this.ele.height();   
    
67.         var nh = Math.min(h+((this.time*this.time)/1000000)*10,this.maxheight);   
    
68.         if(nh >= this.maxheight){   
    
69.             this.callBack();   
    
70.         }   
    
71.         this.ele.height(nh);   
    
72.         this.time += 1000;   
    
73.     },   
    
74.     delh:function(){   
    
75.         var h = this.ele.height();   
    
76.         var nh = Math.max(h-((this.time*this.time)/1000000)*10, this.minheight);   
    
77.         if(nh <= this.minheight){   
    
78.             this.callBack();   
    
79.         }   
    
80.         this.ele.height(nh);   
    
81.         this.time += 1000;   
    
82.     }   
    
83. };  
    
84. 
    
85. function Animation(obj){
    
86.         this.ele = obj.ele;
    
87.         this.maxheight = obj.maxheight||26;
    
88.         this.minheight = obj.minheight||0;
    
89.         this.delay = obj.delay || 0;
    
90.        
    
91.         this.inter = null;
    
92.         this.time = obj.time||200;
    
93.         this.callback = obj.callback;
    
94.         this.type = obj.type || "addh";
    
95.         this.initialize.apply(this, arguments);
    
96. };
    
97. 
    
98. Animation.prototype={
    
99.         constructor:Animation,
    
100.         initialize:function(obj){
     
101.                 this.events = [];//动画状态数组
     
102.                 this.inittime = this.time;
     
103.         },
     
104.         start:function(){
     
105.                 this.events.push(this.type);
     
106.                 /*
     
107.                 判断主循环 是否在执行 在执行的话就 只保存需要执行的状态  
     
108.                 这样就可以保证一个dom只有一个 主循环 从而保证不会出现死循环
     
109.                 */
     
110.                 if(this.inter == null){
     
111.                         this.startAnimate();
     
112.                 }
     
113.         },
     
114.         startAnimate:function(){
     
115.                 this.time = this.inittime;
     
116.                 var t = this;
     
117.                 var type = t.events.pop();//获取最后一个动画
     
118.                 t.events = [];
     
119.                 //主循环
     
120.                 t.inter = setInterval(function(){
     
121.                         switch(type){
     
122.                                 case "addh":
     
123.                                         t.addh();
     
124.                                 break;
     
125.                                 case "delh":
     
126.                                         t.delh();
     
127.                                 break;
     
128.                         }
     
129.                 },50);
     
130.         },
     
131.         callBack:function(){
     
132.                 var len = this.events.length;
     
133.                 clearInterval(this.inter);
     
134.                 var t = this;
     
135.                 if(len == 0){
     
136.                         this.inter = null;
     
137.                         if(typeof this.callback == "function"){
     
138.                                 setTimeout(function(){
     
139.                                         t.callback();
     
140.                                 },this.delay);
     
141.                         }
     
142.                 }
     
143.                 else{
     
144.                         setTimeout(function(){
     
145.                                 t.startAnimate();
     
146.                         },this.delay);
     
147.                 }
     
148.         },
     
149.         addh:function(){
     
150.                 var h = this.ele.height();
     
151.                 var nh = Math.min(h+((this.time*this.time)/1000000)*10,this.maxheight);
     
152.                 if(nh >= this.maxheight){
     
153.                         this.callBack();
     
154.                 }
     
155.                 this.ele.height(nh);
     
156.                 this.time += 1000;
     
157.         },
     
158.         delh:function(){
     
159.                 var h = this.ele.height();
     
160.                 var nh = Math.max(h-((this.time*this.time)/1000000)*10, this.minheight);
     
161.                 if(nh <= this.minheight){
     
162.                         this.callBack();
     
163.                 }
     
164.                 this.ele.height(nh);
     
165.                 this.time += 1000;
     
166.         }
     
167. };

复制代码

上面是基本代码
具体例子

1. <div style="border:1px solid red;width:100px;" id="div1"  >   
   
2. <div style="border:1px solid green;width:50px;margin:auto;" id="div2" ></div>   
   
3. </div>   
   
4. <input type="button" value="同时动" id="btn1" />   
   
5. <input type="button" value="分开动" id="btn2" />   
   
6.   
   
7. <script type="text/javascript" >   
   
8. $(function(){   
   
9.     var div1 = new Animation({   
   
10.         ele:$("#div1"),   
    
11.         maxheight:200,   
    
12.         minheight:0,   
    
13.         delay:0  
    
14.     });   
    
15.     var div2 = new Animation({   
    
16.         ele:$("#div2"),   
    
17.         maxheight:100,   
    
18.         minheight:0,   
    
19.         delay:5000  
    
20.     });   
    
21.       
    
22.     $("#btn1").click(function(){   
    
23.         div1.type="addh";   
    
24.         div1.start();   
    
25.         div2.type="addh";   
    
26.         div2.start();   
    
27.     });   
    
28.     $("#btn2").click(function(){   
    
29.         div1.type="addh";   
    
30.         div1.start();   
    
31.         div1.callback=function(){   
    
32.             div2.type="addh";   
    
33.             div2.start();   
    
34.         };   
    
35.     });   
    
36. });   
    
37. </script>  
    
38. 
    
39. <div style="border:1px solid red;width:100px;" id="div1"  >
    
40. <div style="border:1px solid green;width:50px;margin:auto;" id="div2" ></div>
    
41. </div>
    
42. <input type="button" value="同时动" id="btn1" />
    
43. <input type="button" value="分开动" id="btn2" />
    
44. 
    
45. <script type="text/javascript" >
    
46. $(function(){
    
47.         var div1 = new Animation({
    
48.                 ele:$("#div1"),
    
49.                 maxheight:200,
    
50.                 minheight:0,
    
51.                 delay:0
    
52.         });
    
53.         var div2 = new Animation({
    
54.                 ele:$("#div2"),
    
55.                 maxheight:100,
    
56.                 minheight:0,
    
57.                 delay:5000
    
58.         });
    
59.        
    
60.         $("#btn1").click(function(){
    
61.                 div1.type="addh";
    
62.                 div1.start();
    
63.                 div2.type="addh";
    
64.                 div2.start();
    
65.         });
    
66.         $("#btn2").click(function(){
    
67.                 div1.type="addh";
    
68.                 div1.start();
    
69.                 div1.callback=function(){
    
70.                         div2.type="addh";
    
71.                         div2.start();
    
72.                 };
    
73.         });
    
74. });
    
75. </script>

复制代码

为了方便我在代码中 使用了jquery 。大家需要 引入jquery框架

推荐链接
年薪100万诚邀IT讲师
【推荐】java 新手是如何获得“8K月薪”的？

我顶啊。接着顶

我的我的 忘记了 呵呵

我在q上和你说话

原来还有这么多内幕啊，长见识了，呵呵