今天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^)/