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">
<!--
body {text-align:center}
table {border:1px solid #eeeeee;padding:3px 0;border-bottom-width:5px}
.icon td {width:50px;height:37px;background-image:url(http://www.dnew.cn/attachment/1188099824_0.gif)}
.capt td {font:normal 11px verdana;padding:2px 0}
.a {background-position-y:0px}
.b {background-position-y:-37px}
.c {background-position-y:-74px}
.d {background-position-y:-111px}
.e {background-position-y:-148px}
.f {background-position-y:-185px}
.g {background-position-y:-222px}
.f1 {background-position-x:0px}
.f2 {background-position-x:-51px}
.f3 {background-position-x:-101px}
.f4 {background-position-x:-153px}
.f5 {background-position-x:-205px}
.f6 {background-position-x:-257px}
.f7 {background-position-x:-309px}
-->
</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版

<!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">
<!--
body {text-align:center}
div { width:381px; border:1px solid #eeeeee;padding:3px 0;border-bottom-width:5px}
label {display:block; float:left; width:50px;height:37px;background-image:url(http://www.dnew.cn/attachment/1188099824_0.gif)}
p { display:block; margin-TOP:-30PX; padding-top:30px; float:left; width:50px; height:auto; font:normal 11px verdana; cursor:pointer;}
.a {background-position-y:0px}
.b {background-position-y:-37px}
.c {background-position-y:-74px}
.d {background-position-y:-111px}
.e {background-position-y:-148px}
.f {background-position-y:-185px}
.g {background-position-y:-222px}
.f1 {background-position-x:0px}
.f2 {background-position-x:-51px}
.f3 {background-position-x:-101px}
.f4 {background-position-x:-153px}
.f5 {background-position-x:-205px}
.f6 {background-position-x:-257px}
.f7 {background-position-x:-309px}
-->
</style>

<script language="javascript">
window.onload=function(){
 var tt=document.getElementsByTagName('div')[0];
 var cs=tt.getElementsByTagName('label'),ct=tt.getElementsByTagName('p');

 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>

<body>
<div>
<label class='a f1'></label><label class='b f1'></label><label class='c f1'></label><label class='d f1'></label><label class='e f1'></label><label class='f f1'></label><label class='g f1'></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>

Javascript 相关文章推荐
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 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
You might like
php之CodeIgniter学习笔记
2013/06/17 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
关于PHP开发的9条建议
2015/07/27 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
点击文章内容处弹出页面代码
2009/10/01 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
基于numpy中数组元素的切片复制方法
2018/11/15 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
python代码能做成软件吗
2020/07/24 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
创业计划书如何编写
2014/02/06 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
社区戒毒工作方案
2014/06/04 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
自主招生自荐信格式
2015/03/04 职场文书
经费申请报告范文
2015/05/18 职场文书
酒店温馨提示语
2015/07/14 职场文书