[javascript] Google谷歌首页点点效果

上周五抽空实现了一下谷歌首页（其实是韩国google先搞的）的动画效果，感觉挺有意思，在这里和大家分享下。

这个效果的思路蛮有趣的，是一个类似于我们小时候翻书动画（也叫走马灯？）的效果，将一张大的png图片每次显示一部分。

说明一下，我的实现没有google的那样精致，它最后还有一个返回一点的效果。我为了简单，省略了，呵呵。

首先，这是google用的素材图片：


这是我的素材图片：


区别就在于我把最后那条边裁了，就没有那一小点回退的效果了

然后是容器的css：

>

然后是namespace和常用方法：

}

接着是一个Timer的类，用来在oo的编程方式下管理setTimeout和setInterval，这个类真的很实用，是偶尔发现的，出处忘了，对作者说个不好意思。

//Updated 4/18/2003: Footprint decreased, minor code improvements.
//Updated 5/3/2003: Minor comment clarification; no code changes.
//Updated 5/10/2003: Minor code improvements.
// The constructor should be called with
// the parent object (optional, defaults to window).

准备工作做完，接下来开始代码主题了，其实还是挺简单的，递归调用而已，只不过是oo的方法实现，看起来比较那个，呵呵。注释是用英文写的，看懂应该问题不大。

>

最后是那个container，也就是一个div：

<div id="divAni" class="animator_containter" onmouseover="go();return false;" onmouseout="back();return false;">
        
</div>

完整代码下载
https://files.cnblogs.com/jinweijie/google_toolbar_ani.rar

【updated】
多个动画同时显示的调用
https://files.cnblogs.com/jinweijie/g_toolbar_multi.rar

斗胆发在首页，望各位高人多多指教，若给您浏览带来不便，在这里深表歉意！