今天google 首页的javascript 动画实现。好吧，我来晚了。。。

今天google 首页的javascript 动画实现。好吧,我来晚了。。。
很多人都对今天google 首页的动态logo 感兴趣,我也照着实现了一下,但是刚刚发现园子里已经有人捷足先登了(请看这里)。。。
毕竟是自己的劳动成果,我想就还是发了吧,其实 胡尐睿丶 同学的实现还是有点投机取巧的,他把动画执行完成后生成的html 全部复制下来了,先全部隐藏然后再逐个显现。。。
我的方法则是和google 一样,不断的插入带有背景的div 来实现的,先是建立一个这些div 样式信息[left, top, width, height, background-position-x, background-position-y] 的数组,然后用settimeout 定时地插入带有这些样式的div 即可。
效果如下:(点击运行!)



动画中用到的背景图片:



代码则比较简单:
(function() {
var style_info = [
[307,48,88,89,0,0],
[307,48,89,89,-88,0],
//此处省略n行...
];
var logo = document.getelementbyid('hplogo');
(function logo_run() {
settimeout( function() {
var a, div;
if (a = style_info.shift()) {
div = document.createelement('div');
div.style.csstext = 'position:absolute;'+
'left:'+a[0]+'px;top:'+a[1]+'px;width:'+a[2]+'px;height:'+a[3]+'px;'+
'background:url("graham11-hp-sprite.png") no-repeat '+a[4]+'px '+a[5]+'px;';
logo.appendchild(div);
logo_run();
}
}, 83);
})();
})();
绿色通道:好文要顶关注我收藏该文与我联系



posted @ 2011-05-11 16:16
eric6 阅读(5895)
评论(34)编辑
收藏
发表评论
2112692
回复 引用 查看
#1楼2011-05-11 16:23 | tony zhou

创意牛
回复 引用 查看
#2楼2011-05-11 16:24 | andrewhan

nice
回复 引用 查看
#3楼2011-05-11 16:26 | 啊长

nice
回复 引用 查看
#4楼[楼主]2011-05-11 16:31 | eric6

引用tony zhou:创意牛
确实,创意才是王道,真佩服google ...
回复 引用 查看
#5楼2011-05-11 16:32 | daniel cai

卡的厉害。
回复 引用 查看
#6楼2011-05-11 16:34 | take it and go

好创意
回复 引用 查看
#7楼2011-05-11 16:36 | webaspx

嗯,确实牛!
回复 引用 查看
#8楼2011-05-11 16:36 | i can

好东西
回复 引用 查看
#9楼2011-05-11 16:39 | 塞外孤鹰

牛x。
回复 引用 查看
#10楼[楼主]2011-05-11 16:41 | eric6

@daniel cai
ie 下会卡,可能是由于本页面dom 元素比google 首页多的原因,把代码保存下来用一新的页面在ie 下运行就不会了。
回复 引用 查看
#11楼2011-05-11 16:47 | realroy

犀利~~~~
回复 引用 查看
#12楼2011-05-11 16:50 | 提一个万能问题解决万能答案

so cool
回复 引用 查看
#13楼2011-05-11 17:15 | 风疑

yes,so cool~~
回复 引用 查看
#14楼2011-05-11 17:16 | 陈玉国

@daniel cai
你电脑不行,或着是显卡不好!
回复 引用 查看
#15楼2011-05-11 17:35 | 小腼腆

一点都不晚,哈尼
回复 引用 查看
#16楼2011-05-11 17:43 | tonyqu

css sprite而已,别大惊小怪的
回复 引用 查看
#17楼2011-05-11 17:47 | 《yy》

实现真的很简单,只是创意太牛b了
回复 引用 查看
#18楼2011-05-11 17:59 | 董懂

我觉得这就像是用css+div来制作图片一样,创意很牛吗?
回复 引用 查看
#19楼2011-05-11 19:13 | 鲜宏

的确有创意
回复 引用 查看
#20楼2011-05-11 19:44 | cwgis

太牛了,关键是能把goolge也显示出来,这就非常给力了!
回复 引用 查看
#21楼2011-05-11 20:31 | 胡尐睿丶

很给力,实现思路和google一样了,我的办法确实投机取巧了,goole的思路我也看了,但当时没研究出如何判断css sprite里一行的动作已经执行完毕。不过lz实现了,我也学习一把
回复 引用 查看
#22楼2011-05-11 20:58 | 蔡迅

运行的时候cpu占用稳定在50%左右,google首页那个动画cpu占用却是1%或0,这是为什么?
回复 引用 查看
#23楼2011-05-11 21:13 | 熊熊哥

引用蔡迅:运行的时候cpu占用稳定在50%左右,google首页那个动画cpu占用却是1%或0,这是为什么?
觉得做得挺好的呀,即使不是很快,但要是你也能跟着做,你就不能这么说了。
回复 引用 查看
#24楼2011-05-11 21:45 | 那一剑风情

我改的,看看行不:



回复 引用 查看
#25楼2011-05-11 23:45 | createkang

不错
回复 引用 查看
#26楼2011-05-12 09:44 | john23.net

不错
回复 引用 查看
#27楼2011-05-12 09:49 | 星辰大海

牛啊
回复 引用 查看
#28楼2011-05-12 09:49 | june拼搏

不晚,呵呵牛
回复 引用 查看
#29楼2011-05-12 10:00 | smok.

牛b。。。
回复 引用 查看
#30楼2011-05-12 10:44 | 随风浪迹天涯

我刚看了几个版本的google的logo制作,我反复想 还是lz的创意牛b。
很佩服lz。。
以后多指教。。
回复 引用 查看
#31楼2011-05-12 11:37 | jiang_chao

@那一剑风情
太牛了!看了还不错,就是状态栏刷新
回复 引用 查看
#32楼2011-05-12 14:33 | ^ ^

有意思,动画也非常华丽
回复 引用 查看
#33楼[楼主]2011-05-13 12:38 | eric6

@那一剑风情
呵呵,当然行,不过我还是建议 程序用匿名函数封闭、用settimeout 代替setinterval、用style.csstext 进行批量的样式操作、像document.getelementbyid() 这样的操作放在循环外部。。。的好。
回复 引用 查看
#34楼2011-06-01 16:42 | becket

顶过!
注册用户登录后才能发表评论,请 登录 或 注册,返回博客园首页。
首页博问闪存新闻园子招聘知识库
最新it新闻:
·小米晒余额：支付宝昨日到账1.22亿
·windows 7官方rss动态主题：《昆虫》
·捡到iphone 4s玩自拍 icloud同步酿悲剧
·铁道部购票网站存泄密危险 cdn服务商技术短板是主因
·利用 mimo magictouch 打造另类的平板电脑
»
更多新闻...
最新知识库文章:
·设计师的品牌意识
·如何成为“10倍效率”开发者
·快速排序（quicksort）的javascript实现
·wcf服务端运行时架构体系详解[续篇]
·wcf服务端运行时架构体系详解[下篇]
»
更多知识库文章...



china-pub 2011秋季教材巡展
china-pub 计算机绝版图书按需印刷服务

======================================================

在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定
这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/