效果和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;
}
}
}
// 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