google首页动画（模拟flash帧）

最近跟大师一起写了js的一些实例，分享一下
知识点总结：
1、e.type 获得事件类型
2、setInterval 和 clearInterval 应用
3、css中(background-position)属性在js中写法 style.backgroundPosition
代码如下：
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script>
function addEvent(oTarget, sEventType, fnHandler) 
{
    if (oTarget.addEventListener) 
    {
        oTarget.addEventListener(sEventType, fnHandler, false);
    } 
    else if (oTarget.attachEvent) 
    { 
        oTarget.attachEvent("on" + sEventType, fnHandler);
    } 
    else 
    {
        oTarget["on" + sEventType] = fnHandler;
    }
};

function removeEvent(oTarget, sEventType, fnHandler) 
{
    
    if (oTarget.removeEventListener) 
    {
        oTarget.removeEventListener(sEventType, fnHandler, false);
    } 
    else if (oTarget.detachEvent) 
    {
        oTarget.detachEvent("on" + sEventType, fnHandler);
    } 
    else 
    { 
        oTarget["on" + sEventType] = null;
    }
};
var Class = {
    Create:function()
    {
        return function(){this.init.apply(this,arguments)};    
    }
}

var googleClass = Class.Create();
googleClass.prototype = 
{
    init:function(id)
    {
        this.element = typeof(id) === 'string' ? document.getElementById(id):id;
        
        this.index = this.element.id.split("_")[1];
        this.currentFrame = 0;
        this.backgroundPositionY = this.element.style.backgroundPosition.split(" ")[1];
        
        this.interval = null;
        this.offsetNum = 1;
        
        var _self = this;
        this._mouseHandle = function(e)
        {
            _self.mouseHandle.call(_self,e||window.event)
        }
        
        addEvent(this.element,'mouseover',this._mouseHandle);
        addEvent(this.element,'mouseout',this._mouseHandle);
    },
    
    mouseHandle:function(e)
    {    
        if(e.type == "mouseover")
        {
            this.offsetNum = 1;
            this.currentFrame = 0;
        }
        else if(e.type == "mouseout")
        {
            this.offsetNum = -1;
            this.currentFrame = 4;
        }
        var _self = this;
        clearInterval(this.interval);
        this.interval = setInterval(function(){_self.changeBg.call(_self)},70);
        
    },
    
    changeBg:function()
    {
        //alert(this.currentFrame);
        if(this.currentFrame < 0 || this.currentFrame > 4)
        {
            clearInterval(this.interval);
            return;
        }
        
        this.element.style.backgroundPosition = -52 * this.currentFrame + 'px ' + this.backgroundPositionY;
        this.currentFrame += this.offsetNum;
    }
}
    
</script>
<style type="text/css">
    .bgimg_1{ 
        background-image:url(imges/toolbar_animation_20090618.png); 
        background-repeat:no-repeat;
        52px;
        height:37px;
        margin:4px;
        float:left;
    }
    
</style>
<body>
<div style="430px; height:60px; margin:100px auto;">
    <div id="g_1" class="bgimg_1" style="background-position: 0 0;"></div>
    <div id='g_2' class="bgimg_1" style="background-position: 0 -37px ;"></div>
    <div id="g_3" class="bgimg_1" style="background-position: 0 -74px ;"></div>
    <div id='g_4' class="bgimg_1" style="background-position: 0 -111px ;"></div>
    <div id='g_5' class="bgimg_1" style="background-position: 0 -148px ;"></div>
    <div id='g_6' class="bgimg_1" style="background-position: 0 -185px ;"></div>
    <div id='g_7' class="bgimg_1" style="background-position: 0 -222px ;"></div>
</div>
<script>
    new googleClass('g_1');
    new googleClass('g_2');
    new googleClass('g_3');
    new googleClass('g_4');
    new googleClass('g_5');
    new googleClass('g_6');
    new googleClass('g_7');
</script>