Google首页又玩动画，仿一个看看，附源码下载

打开google，发现logo又有新玩意了，又是动画，简单看了一下，还是原来的老样子，将图片一部分一部分的显示出来做成动画效果，粗略估计了一下，功能应该挺简单的，隔了好久没手写js了，手痒痒，于是准备动手写几行代码看看。谁知，一写又是一大串，不扯那么多，效果图如下：

  

IE的博文不能加脚本和css，点击这里可以看到DEMO。

功能挺简单：

1.可以自动根据动画容器的尺寸来将图片分割成不同帧。

2.理论上支持图片中的帧可多行排列(比如：要播放的动画有30帧，google现在的做法是全部放在1行，理论上这里可以放成3行，每行10帧)。

3.纯手写,没有引用其它js框架辅助.

 

没去分析google的js，不知道他们的图片是怎么弄的，下载到的图片前段部分有空白，所以用ps小小处理了一下。

只是模仿了动画部分，一些细节没做处理，比如google首页载入后有个动画是自动播放且在没点击前是重复播放的。 

另外还有个缺点，依赖播放容器的background属性，代码写得太长了，就没多大兴趣了，没去研究怎么改进，有兴趣的同学可以处理一下。

代码写得比较乱，有简单注释，大家凑合着看看。代码可无限制使用，但出了问题自己负责修复，当然，有空的话也不妨把改进后的版本发给我。 

 

附源码下载:点我下载 

加DEMO到文章里加得好辛苦,觉得有用的同学不妨点点推荐或留个回复鼓励一下...

(完) 

评论

5 楼 ajaxdwr151012 2011-10-12  

顶一个

4 楼 lxs647 2011-10-12  

试了一下，最后画面还原的时候，貌似有跳帧现象、、、

3 楼 悬空90 2011-10-12  

果然是牛人

2 楼 robot2008 2011-10-12  

baiiiuuu 写道

好.....帮你顶！

谢谢，希望对你有用。

1 楼 baiiiuuu 2011-10-12  

好.....帮你顶！