您的位置：首页 > 编程语言 > Go语言

google首页动画（模拟flash帧）

2010-06-26 12:23 316 查看

最近跟大师一起写了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;
width:52px;
height:37px;
margin:4px;
float:left;
}

</style>
<body>
<div style="width: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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航