Google韩国首页图标动画效果_javascript技巧

一个蛮漂亮的动画效果。是Google韩国首页上的。


原版：



nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<script> <BR>window.onload=function(){ <BR> var tt=document.getElementsByTagName('table')[0]; <BR> var cs=tt.rows[1].cells,ct=tt.rows[0].cells; <BR> for(var i=0;i<cs.length;i++) <BR> cssAni(cs[i],ct[i],7); <BR>} <BR>function cssAni(osrc,otarget,num,duration){ <BR> var t=null,c=1,d=0,n=0,i=Math.floor((duration||300)/num); <BR> var s=otarget.className.replace(/.$/,''),r=/over/; <BR> osrc.onmouseover=osrc.onmouseout=function(e){ <BR> n=r.test((e||event).type)?1:-1; <BR> if(!t) t=setInterval(function(){ <BR> if((c==1||c==num)&&((d==n||c+n<1)||!(d=n))) <BR> return clearInterval(t),t=null; <BR> otarget.className=s+(c+=d); <BR> },i); <BR> }; <BR>} <BR></script>



 
   
   
   
   
   
   
   
 
 
   
   
   
   
   
   
   
 

A	B	C	D	E	F	G

DIV版



nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">






<script> <BR>window.onload=function(){ <BR> var tt=document.getElementsByTagName('div')[0]; <BR> var cs=tt.getElementsByTagName('label'),ct=tt.getElementsByTagName('p'); <br><br> for(var i=0;i<cs.length;i++) <BR> cssAni(ct[i],cs[i],7); <BR>} <BR>function cssAni(osrc,otarget,num,duration){ <BR> var t=null,c=1,d=0,n=0,i=Math.floor((duration||300)/num); <BR> var s=otarget.className.replace(/.$/,''),r=/over/; <BR> osrc.onmouseover=osrc.onmouseout=function(e){ <BR> n=r.test((e||event).type)?1:-1; <BR> if(!t) t=setInterval(function(){ <BR> if((c==1||c==num)&&((d==n||c+n<1)||!(d=n))) <BR> return clearInterval(t),t=null; <BR> otarget.className=s+(c+=d); <BR> },i); <BR> }; <BR>} <BR></script>

A

B

C

D

E

F

G