一个蛮漂亮的动画效果。是Google韩国首页上的。
原版：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>测试效果</title>
<styletype="text/css">
<>
</style>
<scriptlanguage="javascript">
window.onload=function(){
vartt=document.getElementsByTagName('table')[0];
varcs=tt.rows[1].cells,ct=tt.rows[0].cells;
for(vari=0;i<cs.length;i++)
cssAni(cs[i],ct[i],7);
}
functioncssAni(osrc,otarget,num,duration){
vart=null,c=1,d=0,n=0,i=Math.floor((duration||300)/num);
vars=otarget.className.replace(/.$/,''),r=/over/;
osrc.onmouseover=osrc.onmouseout=function(e){
n=r.test((e||event).type)?1:-1;
if(!t)t=setInterval(function(){
if((c==1||c==num)&&((d==n||c+n<1)||!(d=n)))
returnclearInterval(t),t=null;
otarget.className=s+(c+=d);
},i);
};
}
</script>
</head>
<body>
<table>
<trclass='icon'>
<tdclass='af1'></td>
<tdclass='bf1'></td>
<tdclass='cf1'></td>
<tdclass='df1'></td>
<tdclass='ef1'></td>
<tdclass='ff1'></td>
<tdclass='gf1'></td>
</tr>
<trclass='capt'>
<td><ahref='#;'>A</a></td>
<td><ahref='#;'>B</a></td>
<td><ahref='#;'>C</a></td>
<td><ahref='#;'>D</a></td>
<td><ahref='#;'>E</a></td>
<td><ahref='#;'>F</a></td>
<td><ahref='#;'>G</a></td>
</tr>
</table>
</body>
</html>
DIV版
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>无标题文档</title>
<styletype="text/css">
<>
</style>
<scriptlanguage="javascript">
window.onload=function(){
vartt=document.getElementsByTagName('div')[0];
varcs=tt.getElementsByTagName('label'),ct=tt.getElementsByTagName('p');
for(vari=0;i<cs.length;i++)
cssAni(ct[i],cs[i],7);
}
functioncssAni(osrc,otarget,num,duration){
vart=null,c=1,d=0,n=0,i=Math.floor((duration||300)/num);
vars=otarget.className.replace(/.$/,''),r=/over/;
osrc.onmouseover=osrc.onmouseout=function(e){
n=r.test((e||event).type)?1:-1;
if(!t)t=setInterval(function(){
if((c==1||c==num)&&((d==n||c+n<1)||!(d=n)))
returnclearInterval(t),t=null;
otarget.className=s+(c+=d);
},i);
};
}
</script>
</head>
<body>
<div>
<labelclass='af1'></label><labelclass='bf1'></label><labelclass='cf1'></label><labelclass='df1'></label><labelclass='ef1'></label><labelclass='ff1'></label><labelclass='gf1'></label>
<p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>F</p><p>G</p>
</div>
</body>
</html>
【Google韩国首页图标动画效果】相关文章：
★ 对联浮动广告效果
★ 滚动效果