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 相关文章推荐
Javascript select下拉框操作常用方法
Nov 09 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 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程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
JavaScript this调用规则说明
2010/03/08 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python字典DICT类型合并详解
2017/08/17 Python
python学生信息管理系统(完整版)
2020/04/05 Python
Python给图像添加噪声具体操作
2019/03/03 Python
Pandas的Apply函数具体使用
2020/07/21 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
中东奢侈品市场:Coveti
2019/05/12 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
简述安装Slackware Linux系统的过程
2012/05/08 面试题
医学专业个人求职自荐信格式
2013/09/23 职场文书
医药专业应届毕业生求职信范文
2014/01/01 职场文书
项目考察欢迎辞
2014/01/17 职场文书
森林防火标语
2014/06/23 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书