9种原生js动画效果

1. 1，匀速动画效果 
2. window.onload = function(){ 
3.  var odiv = document.getElementById('odiv'); 
4.  odiv.onmouseover = function(){ 
5.   startMover(0); 
6.  } 
7.  odiv.onmouseout = function(){ 
8.   startMover(-200); 
9.  } 
10. } 
11. var timer = null; 
12. function startMover(itarget){//目标值 
13.  clearInterval(timer);//执行当前动画同时清除之前的动画 
14.  var odiv = document.getElementById('odiv'); 
15.  timer = setInterval(function(){ 
16.  var speed = 0; 
17.  if(odiv.offsetLeft > itarget){ 
18.   speed = -1; 
19.  } 
20.  else{ 
21.   speed = 1; 
22.  } 
23.  if(odiv.offsetLeft == itarget){ 
24.   clearInterval(timer); 
25.  } 
26.  else{ 
27.   odiv.style.left = odiv.offsetLeft+speed+'px'; 
28.   } 
29.  },30); 
30. } 
31.  
32.  
33. 2，缓冲动画效果 
34. window.onload = function(){ 
35.  var odiv = document.getElementById('odiv'); 
36.  odiv.onmouseover = function(){ 
37.   startMover(0); 
38.  } 
39.  odiv.onmouseout = function(){ 
40.   startMover(-200); 
41.  } 
42. } 
43. var timer = null; 
44. function startMover(itarget){//速度和目标值 
45.  clearInterval(timer);//执行当前动画同时清除之前的动画 
46.  var odiv = document.getElementById('odiv'); 
47.  timer = setInterval(function(){ 
48.  var speed = (itarget-odiv.offsetLeft)/10;//缓冲动画的速度参数变化值 
49.  //如果速度是大于0，说明是向右走，那么就向上取整 
50.  speed = speed>0?Math.ceil(speed):Math.floor(speed); 
51.  //Math.floor();向下取整 
52.  if(odiv.offsetLeft == itarget){ 
53.   clearInterval(timer); 
54.  } 
55.  else{ 
56.   //clientLeft 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离  
57.   odiv.style.left = odiv.offsetLeft+speed+'px'; 
58.   } 
59.  },30); 
60. } 
61.  
62. 3，透明度动画 
63. window.onload = function(){ 
64.  var odiv = document.getElementsByTagName('div'); 
65.  for(var i=0;i<odiv.length;i++) 
66.  { 
67.    odiv[i].onmouseover = function(){ 
68.    startOP(this,100); 
69.   } 
70.   odiv[i].onmouseout = function(){ 
71.    startOP(this,30); 
72.   } 
73.   odiv[i].timer = null;//事先定义 
74.   odiv[i].alpha = null;//事先定义 
75.   //这里发现一个问题，对象的动画属性可以不定义，但是透明度属性必须定义，否则报错 
76.  } 
77. } 
78. function startOP(obj,utarget){ 
79.   clearInterval(obj.timer);//先关闭定时器 
80.   obj.timer = setInterval(function(){ 
81.   var speed = 0; 
82.   if(obj.alpha>utarget){ 
83.   speed = -10; 
84.   } 
85.   else{ 
86.   speed = 10; 
87.   } 
88.   obj.alpha = obj.alpha+speed; 
89.   if(obj.alpha == utarget){ 
90.   clearInterval(obj.timer); 
91.   } 
92.   obj.style.filter = 'alpha(opacity:'+obj.alpha+')';//基于IE的 
93.   obj.style.opacity = parseInt(obj.alpha)/100; 
94.   },30);  
95. } 
96.  
97. 4，多物体动画 
98.  
99. window.onload = function(){ 
100.  var olist = document.getElementsByTagName('li'); 
101.  for(var i=0; i<olist.length;i++) 
102.  { 
103.   olist[i].onmouseover = function(){ 
104.   startmov(this,400); 
105.   }; 
106.   olist[i].onmouseleave = function(){ 
107.   startmov(this,200); 
108.   }; 
109.   olist[i].timer = null; 
110.  } 
111.  function startmov(obj,itarget){ 
112.   clearInterval(obj.timer);//执行动画之前清除动画 
113.   obj.timer = setInterval(function(){ 
114.    var speed =0; 
115.    speed = (itarget - obj.offsetWidth)/8; 
116.    speed = speed>0?Math.ceil(speed):Math.floor(speed); 
117.    if(obj.offsetWidth == itarget){ 
118.    clearInterval(obj.timer); 
119.    } 
120.    else{ 
121.    obj.style.width = obj.offsetWidth+speed+'px'; 
122.    } 
123.   },30); 
124.  } 
125. } 
126.  
127. 5，获取样式动画 
128.  
129. window.onload = function(){ 
130.         var odiv = document.getElementById('odiv'); 
131.         odiv.onmouseover = function(){ 
132.             startMov(this); 
133.         }; 
134.         function startMov(obj){ 
135.             setInterval(function(){ 
136.                 obj.style.width = parseInt(getStyle(obj,'width'))+1+'px'; 
137.                 obj.style.fontSize = parseInt(getStyle(obj,'fontSize'))+1+'px'; 
138.             },30); 
139.         } 
140.         function getStyle(obj,attr) 
141.         { 
142.             if(obj.currentStyle){ 
143.                 return obj.currentStyle[attr]; 
144.             } 
145.             else{ 
146.                 return getComputedStyle(obj,false)[attr]; 
147.             } 
148.         } 
149.     } 
150.  
151. 6，多物体复杂动画 
152.  
153. window.onload = function(){ 
154.  var li1 = document.getElementById('li1'); 
155.  var li2 = document.getElementById('li2'); 
156.  li1.onmouseover = function(){ 
157.   startMov(this,400,'width'); 
158.  }; 
159.  li1.onmouseout = function(){ 
160.   startMov(this,200,'width'); 
161.  }; 
162.  li2.onmouseover = function(){ 
163.   startMov(this,200,'height'); 
164.  }; 
165.  li2.onmouseout = function(){ 
166.   startMov(this,100,'height'); 
167.  }; 
168.  function startMov(obj,itarget,attr){ 
169.   clearInterval(obj.timer);//执行动画之前清除动画 
170.   obj.timer = setInterval(function(){ 
171.    var icur = parseInt(getStyle(obj,attr)); 
172.    var speed =0; 
173.    speed = (itarget - icur)/8; 
174.    speed = speed>0?Math.ceil(speed):Math.floor(speed); 
175.    if(icur == itarget){ 
176.    clearInterval(obj.timer); 
177.    } 
178.    else{ 
179.    obj.style[attr] = icur+speed+'px'; 
180.    } 
181.   },30); 
182.  } 
183.  function getStyle(obj,attr) 
184.  { 
185.   if(obj.currentStyle){ 
186.   return obj.currentStyle[attr]; 
187.   } 
188.   else{ 
189.   return getComputedStyle(obj,false)[attr]; 
190.   } 
191.  } 
192. } 
193. 7，多物体复杂动画（带透明度的） 
194.  
195. window.onload = function(){ 
196.  var li1 = document.getElementById('li1'); 
197.  var li2 = document.getElementById('li2'); 
198.  li1.onmouseover = function(){ 
199.   startMov(this,100,'opacity'); 
200.  }; 
201.  li1.onmouseout = function(){ 
202.   startMov(this,30,'opacity'); 
203.  }; 
204.  li2.onmouseover = function(){ 
205.   startMov(this,200,'height'); 
206.  }; 
207.  li2.onmouseout = function(){ 
208.   startMov(this,100,'height'); 
209.  } 
210.  li1.timer = null; 
211.  li2.timer = null; 
212.  function startMov(obj,itarget,attr){ 
213.   clearInterval(obj.timer);//执行动画之前清除动画 
214.   obj.timer = setInterval(function(){ 
215.    var icur = 0; 
216.    if(attr == 'opacity'){ 
217.    icur = Math.round(parseFloat(getStyle(obj,attr))*100);//转换成整数,并且四舍五入下 
218.    //计算机在计算小数的时候往往是不准确的！ 
219.    } 
220.    else{ 
221.    icur = parseInt(getStyle(obj,attr)); 
222.    } 
223.    var speed =0; 
224.    speed = (itarget - icur)/8; 
225.    speed = speed>0?Math.ceil(speed):Math.floor(speed); 
226.    if(icur == itarget){ 
227.    clearInterval(obj.timer); 
228.    } 
229.    else{ 
230.     if(attr == 'opacity'){ 
231.     obj.style.filter = 'alpha(opacity:'+(icur+speed)+')'; 
232.     obj.style.opacity = (icur+speed)/100; 
233.     } 
234.     else{ 
235.     obj.style[attr] = icur+speed+'px'; 
236.     }  
237.    } 
238.   },30); 
239.  } 
240.  function getStyle(obj,attr) 
241.  { 
242.   if(obj.currentStyle){ 
243.   return obj.currentStyle[attr]; 
244.   } 
245.   else{ 
246.   return getComputedStyle(obj,false)[attr]; 
247.   } 
248.  } 
249. } 
250.  
251. 8，链式动画 
252. window.onload = function(){ 
253.  var li1 = document.getElementById('li1'); 
254.  li1.onmouseover = function(){ 
255.   startMov(li1,400,'width',function(){ 
256.    startMov(li1,200,'height',function(){ 
257.    startMov(li1,100,'opacity'); 
258.    }); 
259.   }); 
260.  }; 
261.  li1.onmouseout = function(){ 
262.   startMov(li1,30,'opacity',function(){ 
263.    startMov(li1,100,'height',function(){ 
264.    startMov(li1,100,'width'); 
265.    }); 
266.   }); 
267.  }; 
268.  li1.timer = null; 
269.  function startMov(obj,itarget,attr,fn){//fn回调函数 
270.   clearInterval(obj.timer);//执行动画之前清除动画 
271.   obj.timer = setInterval(function(){ 
272.    var icur = 0; 
273.    if(attr == 'opacity'){ 
274.    icur = Math.round(parseFloat(getStyle(obj,attr))*100);//转换成整数,并且四舍五入下 
275.    //计算机在计算小数的时候往往是不准确的！ 
276.    } 
277.    else{ 
278.    icur = parseInt(getStyle(obj,attr)); 
279.    } 
280.    var speed =0; 
281.    speed = (itarget - icur)/8; 
282.    speed = speed>0?Math.ceil(speed):Math.floor(speed); 
283.    if(icur == itarget){ 
284.    clearInterval(obj.timer); 
285.    if(fn){ 
286.     fn(); 
287.    } 
288.    } 
289.    else{ 
290.     if(attr == 'opacity'){ 
291.     obj.style.filter = 'alpha(opacity:'+(icur+speed)+')'; 
292.     obj.style.opacity = (icur+speed)/100; 
293.     } 
294.     else{ 
295.     obj.style[attr] = icur+speed+'px'; 
296.     }  
297.    } 
298.   },30); 
299.  } 
300.  function getStyle(obj,attr) 
301.  { 
302.   if(obj.currentStyle){ 
303.   return obj.currentStyle[attr]; 
304.   } 
305.   else{ 
306.   return getComputedStyle(obj,false)[attr]; 
307.   } 
308.  } 
309. } 
310.  
311. 9，多物体同时运动动画 
312. window.onload = function(){ 
313.  var li1 = document.getElementById('li1'); 
314.  li1.onmouseover = function(){ 
315.   startMov(li1,{width:201,height:200,opacity:100}); 
316.  }; 
317.  li1.onmouseout = function(){ 
318.   startMov(li1,{width:200,height:100,opacity:30}); 
319.  }; 
320.  li1.timer = null; 
321.  function startMov(obj,json,fn){//fn回调函数 
322.   clearInterval(obj.timer);//执行动画之前清除动画 
323.   var flag = true;//是否动画都完成了 
324.   obj.timer = setInterval(function(){ 
325.    for(var attr in json){ 
326.    var icur = 0; 
327.    if(attr == 'opacity'){ 
328.    icur = Math.round(parseFloat(getStyle(obj,attr))*100);//转换成整数,并且四舍五入下 
329.    //计算机在计算小数的时候往往是不准确的！ 
330.    } 
331.    else{ 
332.    icur = parseInt(getStyle(obj,attr)); 
333.    } 
334.    var speed =0; 
335.    speed = (json[attr] - icur)/8; 
336.    speed = speed>0?Math.ceil(speed):Math.floor(speed); 
337.    if(icur != json[attr]){ 
338.    flag = false; 
339.    } 
340.    if(attr == 'opacity'){ 
341.    obj.style.filter = 'alpha(opacity:'+(icur+speed)+')'; 
342.    obj.style.opacity = (icur+speed)/100; 
343.    } 
344.    else{ 
345.    obj.style[attr] = icur+speed+'px'; 
346.    } 
347.    if(flag){ 
348.    clearInterval(obj.timer); 
349.    if(fn){ 
350.     fn(); 
351.    } 
352.    } 
353.   } 
354.   },30); 
355.  } 
356.  function getStyle(obj,attr) 
357.  { 
358.   if(obj.currentStyle){ 
359.   return obj.currentStyle[attr]; 
360.   } 
361.   else{ 
362.   return getComputedStyle(obj,false)[attr]; 
363.   } 
364.  } 
365. }