仿google主页的动画按钮
仿google首页的动画按钮
最近闲来无事，自己实现了下google首页的动画按钮，但是效果和google的差很多，大家看看，这个应该怎么实现好？代码在附件中，大家研究下。
最近闲来无事，自己实现了下google首页的动画按钮，但是效果和google的差很多，大家看看，这个应该怎么实现好？代码在附件中，大家研究下。
<html>
<head>
<style type="text/css">
label {display:block; float:left; width:50px;height:37px;background-image:url(toolbar.png);}
.a {background-position-y:0px}
.b {background-position-y:-37px}
.c {background-position-y:-74px}
.d {background-position-y:-111px}
.e {background-position-y:-148px}
.f {background-position-y:-185px}
.g {background-position-y:-222px}
.f1 {background-position-x:0px}
.f2 {background-position-x:-51px}
.f3 {background-position-x:-101px}
.f4 {background-position-x:-153px}
.f5 {background-position-x:-205px}
.f6 {background-position-x:-257px}
.f7 {background-position-x:-309px}
</style>
<script language = "JavaScript">
var speed=70;
var num=[1,1,1,1,1,1,1,1];
var curpic="";
var yname=['','a','b','c','d','e','f','g'];
var timer=new Array(8);
//仿google图片悬停动画
function num_up(){
//clearTimeout(timer[curpic]);
eval("document.getElementById('pic"+curpic+"').className='"+yname[curpic]+" f"+num[curpic]+"'");
if(num[curpic]>=5){
clearTimeout(timer[curpic]);
return;
}
num[curpic]++;
timer[curpic]=setTimeout(num_up,speed);
}
function num_down(){
for(i=1;i<timer.length;i++){
if(i==curpic)
clearTimeout(timer[i]);
eval("document.getElementById('pic"+i+"').className='"+yname[i]+" f"+num[i]+"'");
if(num[i]<=1){
clearTimeout(timer[i]);
continue;
}
num[i]--;
timer[i]=setTimeout(num_down,speed);
}
}
</script>
</head>
<body>
<label id="pic1" class="a f1" onmouseover="curpic='1';num_up();" onmouseout="curpic='1';num_down();"></label>
<label id="pic2" class="b f1" onmouseover="curpic='2';num_up();" onmouseout="curpic='2';num_down();"></label>
<label id="pic3" class="c f1" onmouseover="curpic='3';num_up();" onmouseout="curpic='3';num_down();"></label>
<label id="pic4" class="d f1" onmouseover="curpic='4';num_up();" onmouseout="curpic='4';num_down();"></label>
<label id="pic5" class="e f1" onmouseover="curpic='5';num_up();" onmouseout="curpic='5';num_down();"></label>
<label id="pic6" class="f f1" onmouseover="curpic='6';num_up();" onmouseout="curpic='6';num_down();"></label>
<label id="pic7" class="g f1" onmouseover="curpic='7';num_up();" onmouseout="curpic='7';num_down();"></label>
</body>
</html>
1 楼
mmode
2009-02-04
有时候移到圆点时，会有点失灵。
2 楼
脑袋雷劈的
2009-02-04
坛子里已经有很多实现了。