编程 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 相关文章推荐

一个js控制的导航菜单实例代码

Dec 03 Javascript

JavaSript中变量的作用域闭包的深入理解

May 12 Javascript

Javascript实现简单的富文本编辑器附演示

Jun 16 Javascript

基于jQuery倒计时插件实现团购秒杀效果

May 13 Javascript

jQuery 实现ajax传入参数含有特殊字符的方法总结

Oct 17 Javascript

js/jquery控制页面动态加载数据滑动滚动条自动加载事件的方法

Feb 08 Javascript

深入理解ES6 Promise 扩展always方法

Sep 26 Javascript

vue和react等项目中更简单的实现展开收起更多等效果示例

Feb 22 Javascript

React native ListView 增加顶部下拉刷新和底下点击刷新示例

Apr 27 Javascript

详解Next.js页面渲染的优化方案

Jan 27 Javascript

JS中call()和apply()的功能及用法实例分析

Jun 28 Javascript

js仿淘宝放大镜效果

Dec 28 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