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 相关文章推荐
js获取图片长和宽度的代码
Nov 24 Javascript
JS实现商品倒计时实现代码
May 03 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 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中的字符串函数
2006/11/24 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
JavaScript创建对象方法实例小结
2018/09/03 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
python中循环语句while用法实例
2015/05/16 Python
Python探索之创建二叉树
2017/10/25 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
分析python切片原理和方法
2017/12/19 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
python支付宝支付示例详解
2019/08/22 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
python mock测试的示例
2020/10/19 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
final, finally, finalize的区别
2012/03/01 面试题
餐厅经理岗位职责范本
2014/02/17 职场文书
水利水电专业自荐信
2014/07/08 职场文书
计生工作先进事迹
2014/08/15 职场文书
2019年思想汇报
2019/06/20 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
python神经网络ResNet50模型
2022/05/06 Python