Javascript实现Google谷歌首页导航菜单动画效果

cobra - 2008-6-2 13:26:00

文/jinweijie 出处/博客园

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

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

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

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

附件: 您所在的用户组无法下载或查看附件

这是我的素材图片：

附件: 您所在的用户组无法下载或查看附件

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

然后是容器的css：

Code

然后是namespace和常用方法：

Code

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

Code

[copy to clipboard]

CODE:

//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).

function Timer(){
this.obj = (arguments.length)?arguments[0]:window;
return this;
}

// The set functions should be called with:
// - The name of the object method (as a string) (required)
// - The millisecond delay (required)
// - Any number of extra arguments, which will all be
// passed to the method when it is evaluated.

Timer.prototype.setInterval = function(func, msec){
var i = Timer.getNew();
var t = Timer.buildCall(this.obj, i, arguments);
Timer.set.timer = window.setInterval(t,msec);
return i;
}
Timer.prototype.setTimeout = function(func, msec){
var i = Timer.getNew();
Timer.buildCall(this.obj, i, arguments);
Timer.set.timer = window.setTimeout("Timer.callOnce("+i+");",msec);
return i;
}

// The clear functions should be called with
// the return value from the equivalent set function.

Timer.prototype.clearInterval = function(i){
if(!Timer.set) return;
window.clearInterval(Timer.set.timer);
Timer.set = null;
}
Timer.prototype.clearTimeout = function(i){
if(!Timer.set) return;
window.clearTimeout(Timer.set.timer);
Timer.set = null;
}

// Private data

Timer.set = new Array();
Timer.buildCall = function(obj, i, args){
var t = "";
Timer.set = new Array();
if(obj != window){
Timer.set.obj = obj;
t = "Timer.set["+i+"].obj.";
}
t += args[0]+"(";
if(args.length > 2){
Timer.set[0] = args[2];
t += "Timer.set["+i+"][0]";
for(var j=1; (j+2)<args.length; j++){
Timer.set[j] = args[j+2];
t += ", Timer.set["+i+"]["+j+"]";
}
}
t += ");";
Timer.set.call = t;
return t;
}

Timer.callOnce = function(i){
if(!Timer.set) return;
eval(Timer.set.call);
Timer.set = null;
}
Timer.getNew = function(){
var i = 0;
while(Timer.set) i++;
return i;
}