最近跟大师一起写了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>