用户操作
[留言]  [发消息]  [加为好友] 
订阅我的博客
XML聚合    FeedSky
订阅到鲜果
订阅到Google
订阅到抓虾
rob123的公告
http://www.robchen.cn http://www.richjavascript.com QQ 4705648 MSN robchen@126.com Email robchen@126.com QQ群: Javascript权威指南:28736465 AJAXers:13446153 WEB开发技术联盟:11181668 CN.Ruby:13438650
文章分类
存档

原创  仿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

发表于 @ 2007年06月03日　12:28:00 | 评论( loading... ) | 编辑| 举报| 收藏

旧一篇:两个frame同步滚动 | 新一篇:JavascriptDataGrid(beta)
查看最新精华文章 请访问博客首页相关文章
  • 发表评论
  • 评论内容：
  •  
Copyright © rob123
Powered by CSDN Blog