仿GOOGLE的Javascript动画

效果和GOOGLE的一样，只是具体实现方式有点不一样，各有利弊。

这里定义了一个Player类，并实现了一些简单的控制方法，有兴趣的可以自己扩展

//  JavaScript Player
//  Author:Radish(Robin Chen) QQ:4705648 MSN:robchen@126.com EMAIL:robchen@126.com

function  Player(movieClips,interval,containter) ... {
    var uniqueID = Math.round(Math.random()*1000);
    while(window[uniqueID])...{
        uniqueID ++;
    }
    this.uniqueID = uniqueID;
    this.timeLine = movieClips;
    this.containter = containter;
    this.interval = interval;
    this.currentFrame = 0;
    this.playMode = 0;
}
Player.prototype  =   ... {
    play:function()...{
        if(this.currentFrame >= this.timeLine.length)...{
            this.currentFrame = this.timeLine.length - 1;
            this.stop();
            return;
        }else if(this.currentFrame < 0)...{
            this.currentFrame = 0;
            this.stop();
            return;
        }
        this.showMovie();
        if(this.playMode == 0)...{
            this.currentFrame ++;
        }else...{
            this.currentFrame --;
        }
        var _this = this;
        window[this.uniqueID] = window.setTimeout(function()...{_this.play();},this.interval);
    },
    stop:function()...{
        window.clearTimeout(window[this.uniqueID]);
    },
    gotoAndStop:function(frame)...{
        if(frame < 0)frame = this.timeLine.length + frame;
        frame = (frame >= this.timeLine.length)?this.timeLine.length-1:frame;
        this.currentFrame = frame;
        this.showMovie();
        this.stop();
    },
    gotoAndPlay:function(frame)...{
        if(frame < 0)frame = this.timeLine.length + frame;
        frame = (frame > this.timeLine.length)?this.timeLine.length:frame;
        this.currentFrame = frame;
        this.showMovie();
        this.play();
    },
    showMovie:function()...{
        if(this.containter.tagName.toLowerCase() == "img")...{
            this.containter.src = this.timeLine[this.currentFrame].src;
        }else...{
            this.containter.style.backgroundImage = this.timeLine[this.currentFrame].src;
        }
    }
}

 
本文效果的演示地址如下：
http://www.robchen.cn/jsplayer/

GOOGLE的效果演示：
http://www.google.co.kr/ig?sp=korea&hl=ko