【转载】 用JS实现google首页动画
图片:
演示网址：
http://www.seal321.com/test/test.html
转载地址：
http://bbs.sa20.com/viewthread.php?tid=841846
<!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=gb2312" />
<title>无标题文档</title>
<script>
var _begin = 0;
var _end = 6;
var _beginIndex = 0;
var _endIndex = 6;
//var nowIndex = _begin;
var nowStep = [];
var target = [];
var pAni = [];
for(var i=_beginIndex;i<=_endIndex;i++){
nowStep[i] = _begin;
target[i] = _end;
pAni[i] = null;
}
function callInterval(index){
if(pAni[index] == null){
pAni[index] = setInterval('animation('+index+')',75);
}
}
function clearCall(index){
if(pAni[index] != null){
clearInterval(pAni[index]);
pAni[index] = null;
}
}
function begin(index){
callInterval(index);
target[index] = _end;
}
function end(index){
callInterval(index);
target[index] = _begin;
}
function animation(index){
var obj = document.getElementById("ani_"+index);
if(!obj.style.cursor){
obj.style.cursor = 'pointer';
obj.style.backgroundImage = 'url(bg.gif)';
obj.style.backgroundRepeat = 'no-repeat';
}
var x,y;
if(nowStep[index] < target[index]){
++nowStep[index]>=target[index] && clearCall();
}else if(nowStep[index] > target[index]){
--nowStep[index]<=target[index] && clearCall();
}else{
clearCall(index);
return;
}
if(nowStep[index]==_end){
x = (nowStep[index]-2)*-52;
y = index*-37+4;
}else if(nowStep[index]==_end-1){
x = (nowStep[index]-1)*-52;
y = index*-37+2;
}else{
x = nowStep[index]*-52;
y = index*-37;
}
obj.style.backgroundPosition = x+'px '+y+'px';
}
window.onload=function(){
var obj;
for(var i=_beginIndex;i<=_endIndex;i++){
obj = document.getElementById("ani_"+i);
obj.onmouseover = Function('begin('+i+')');
obj.onmouseout = Function('end('+i+')');
}
}
</script>
</head>
<body>
<table width="364" height="41" border="0" align="center" cellpadding="0" cellspacing="1"
style="border:1px solid #000">
<tr>
<td id="ani_0"> </td>
<td id="ani_1"> </td>
<td id="ani_2"> </td>
<td id="ani_3"> </td>
<td id="ani_4"> </td>
<td id="ani_5"> </td>
<td id="ani_6"> </td>
</tr>
</table>
</body>
</html>
