编程 Javascript

Google韩国首页图标动画效果

Posted in Javascript onAugust 26, 2007

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

原版：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>测试效果</title>
<style type="text/css">

</style>
<script language="javascript">
window.onload=function(){
var tt=document.getElementsByTagName('table')[0];
var cs=tt.rows[1].cells,ct=tt.rows[0].cells;
for(var i=0;i<cs.length;i++)
   cssAni(cs[i],ct[i],7);
}
function cssAni(osrc,otarget,num,duration){
var t=null,c=1,d=0,n=0,i=Math.floor((duration||300)/num);
var s=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)))
         return clearInterval(t),t=null;
     otarget.className=s+(c+=d);
   },i);
};
}
</script>
</head>
<body>
<table>
<tr class='icon'>
   <td class='a f1'></td>
   <td class='b f1'></td>
   <td class='c f1'></td>
   <td class='d f1'></td>
   <td class='e f1'></td>
   <td class='f f1'></td>
   <td class='g f1'></td>
</tr>
<tr class='capt'>
   <td><a href='#;'>A</a></td>
   <td><a href='#;'>B</a></td>
   <td><a href='#;'>C</a></td>
   <td><a href='#;'>D</a></td>
   <td><a href='#;'>E</a></td>
   <td><a href='#;'>F</a></td>
   <td><a href='#;'>G</a></td>
</tr>
</table>
</body>
</html>

DIV版

for(var i=0;i<cs.length;i++)
   cssAni(ct[i],cs[i],7);
}
function cssAni(osrc,otarget,num,duration){
var t=null,c=1,d=0,n=0,i=Math.floor((duration||300)/num);
var s=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)))
         return clearInterval(t),t=null;
     otarget.className=s+(c+=d);
   },i);
};
}
</script>

</head>

Google韩国首页图标动画效果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

表单的一些基本用法与技巧

Jul 15 Javascript

兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)

Nov 04 Javascript

Node.js中的事件驱动编程详解

Aug 16 Javascript

理解Javascript的动态语言特性

Jun 17 Javascript

JS实现超简洁网页title标题跑动闪烁提示效果代码

Oct 23 Javascript

深入理解bootstrap框架之入门准备

Oct 09 Javascript

JavaScript装饰器函数(Decorator)实例详解

Mar 30 Javascript

AngularJS基于factory创建自定义服务的方法详解

May 25 Javascript

vue router使用query和params传参的使用和区别

Nov 13 Javascript

JavaScript捕捉事件和阻止冒泡事件实例分析

Aug 03 Javascript

脚手架vue-cli工程webpack的作用和特点

Sep 29 Javascript

React Hooks的深入理解与使用

Nov 12 Javascript

javascript在一段文字中的光标处插入其他文字

Aug 26 #Javascript

有一段有意思的代码-javascript现实多行信息

Aug 26 #Javascript

LBS blog sql注射漏洞[All version]-官方已有补丁

Aug 26 #Javascript

javascript下操作css的float属性的特殊写法

Aug 22 #Javascript

ASP中用Join和Array，可以加快字符连接速度的代码

Aug 22 #Javascript

可以把编码转换成 gb2312编码lib.UTF8toGB2312.js

Aug 21 #Javascript

lib.utf.js

Aug 21 #Javascript