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 动画弹出窗体支持多种展现方式
Apr 29 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 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
我的论坛源代码(十)
2006/10/09 PHP
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
微信小程序收藏功能的实现代码
2020/06/19 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python与shell的3种交互方式介绍
2015/04/11 Python
Python输出9*9乘法表的方法
2015/05/25 Python
Python 查看文件的编码格式方法
2017/12/21 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
网络体系结构及协议的定义
2014/03/13 面试题
应届大专毕业生自我鉴定
2014/04/08 职场文书
股份合作协议书范本
2014/04/14 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript