模拟google首页动画图标的

转载于 2008-12-15 23:48:00 发布 · 603 阅读

文章标签：

本文介绍了一种使用JavaScript实现的鼠标悬停背景图片切换效果。当鼠标悬停在一个元素上时，背景图片会逐步变化到另一种状态；当鼠标移开时，则会返回到初始状态。此效果通过设置不同的背景位置来实现平滑过渡。

<div id="testit" style="width:50px; height:32px; background-image:url(bg.png);background-repeat:no-repeat;background-position:0px 0px;" onmouseover="popup();" onmouseout="popdn();"></div>
<script language="javascript">
var te=0;
var te2=5;
var arrbg=new Array();
var doit
var doit1
arrbg[0]="0px 0px";
arrbg[1]="-51px 0px";
arrbg[2]="-103px 0px";
arrbg[3]="-155px 0px";
arrbg[4]="-207px 0px";
arrbg[5]="-207px 3px";

function popdn(){
te2=5;
doit1=setInterval("pd()",50);
}
function pd(){
if(te2>=0){
document.getElementById("testit").style.backgroundPosition=arrbg[te2];
te2=te2-1;
}
else{
clearInterval(doit1);
}
}

</script>