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 强制刷新页面的实现代码
Dec 13 Javascript
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
vue中nextTick用法实例
Sep 11 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 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/25 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
js 走马灯简单实例
2013/11/21 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
详解Python如何生成词云的方法
2018/06/01 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
Footshop法国:购买运动鞋
2020/01/19 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
简述安装Slackware Linux系统的过程
2012/01/12 面试题
绿化工程实施方案
2014/03/17 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis