Google动画脚本收藏

Google动画脚本收藏

 

网上搜索的,呵呵!!

 

/*
author      :   DK
email       :   [e-mail]
date        :   2011.10.12
description :   仿google首页动画
*/
/*
options参数说明:
element:string,动画容器的id
url:string,用于播放动画的图片地址
speed:int,每秒帧数
hover:function,鼠标移动到element上时调用
blur:function,鼠标离开element时调用
*/
function animation(options) {
    var defaultOptions = { element: "", url: "", speed: 11, hover: function () { }, blur: function () { } };
    this.init(options, defaultOptions);
};

animation.prototype = {
    init: function (o1, o2) {
        var me = this;
        for (var p in o2) {
            me[p] = o1[p] || o2[p];
        }
        me.element = document.getElementById(me.element);
        me.delay = 1000 / me.speed;
        me.step = 0;
        me.defaultBackground = me.element.style.background;
        me.defalutUrl = me.element.style.backgroundImage;
        me.url = me.url || me.defalutUrl;
        me.width = me.element.clientWidth;
        me.height = me.element.clientHeight;
        var img = new Image();
        img.onload = function () {
            me.cols = parseInt(img.width / me.width);
            me.rows = parseInt(img.height / me.height);
            me.frames = me.cols * me.rows;
            me.element.onclick = function () {
                me.play();
            };
            me.element.onmouseover = function () {
                me.onhover();
            };
            me.element.onmouseout = function () {
                me.onblur();
            };
        };
        img.src = me.url;
    }

, play: function () {
    if (this.playing) {
        return;
    }
    this.playing = true;
    this.next();
},
    onhover: function () {
        if (!this.playing) {
            this.hover();
        }
    },
    onblur: function () {
        if (!this.playing) {
            this.blur();
        }
    },
    next: function () {
        var me = this;
        me.step++;
        if (me.step > me.frames) {
            me.stop();
            return;
        }
        var x = me.step % me.cols;
        var y = parseInt(me.step / me.rows);
        if (me.step % me.rows > 0) {
            y++;
        }
        var position = "-" + (x - 1) * me.width + "px -" + (y - 1) * me.height + "px";
        me.element.style.background = "url(" + me.url + ") " + position;
        setTimeout(function () { me.next(); }, me.delay);
    },
    stop: function () {
        var me = this;
        me.step = 0;
        me.playing = false;
        me.element.style.background = me.defaultBackground;
    } 
};