定时器setTimeout的问题。。。。

Question

b不知道你要什么效果，是不是要：<div  style=" width:50px; height:38px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png)" onmouseover="touch(event,52,0)" onMouseOut="restore()"></div>
<div  style=" width:50px; height:38px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png); background-position:0px -35" onmouseover="touch(event,52,-35)" onMouseOut="restore()"></div>
<div  style=" width:50px; height:38px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png); background-position:0px -70" onmouseover="touch(event,52,-70)" onMouseOut="restore()"></div>
<div  style=" width:50px; height:38px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png); background-position:0px -107" onmouseover="touch(event,52,-107)" onMouseOut="restore()"></div>
<script>
var obj
var timer=""
var g=0
var sty=new Array()  //记录图片位置的数组function touch(e,a1,a2){
 e = e||event
 obj = e.srcElement||e.target
 var f=0 
 for(var i=0;i<5;i++)
 {sty[i]="-"+f+"px"+" "+a2+"px"
 f=f+a1}                        //循环得出图片的位置
timer=setTimeout("change()",10)
}function change(){  
if(timer){clearTimeout(timer)}             //=======
if(g==sty.length-1)
{
obj.style.backgroundPosition=sty[g];
timer=setTimeout("change()",100)
document.getElementById("ff").innerHTML=g}
else
{
obj.style.backgroundPosition=sty[g]
g++
document.getElementById("ff").innerHTML=g
timer=setTimeout("change()",100)
}
}function restore(){
if(timer){clearTimeout(timer)}        //================
if(g<1)
{clearTimeout(timer);
obj.style.backgroundPosition=sty[0]
timer=setTimeout("change()",100)
document.getElementById("ff").innerHTML=g}
else
{
obj.style.backgroundPosition=sty[g]
g--
document.getElementById("ff").innerHTML=g
timer=setTimeout("restore()",100)
}
}
</script>
<div id="ff"></div>

Answer 1

2楼不是这个 ，问题没解决
这个东西得亲手去试才会发现问题的 （PS：我描述能力非常的差）
大概是这样的
鼠标移动到一个图片上  图片还没有显示完全（就是还没有显示到最后一张），快速把鼠标移动到下面的一张图片上去这时又会有触发change（） 所以就会取消定时器,那先前的那张图片就会保持原来的样子了。。
唉 说穿了，就是触发事件时，根据不同的时间显示一张图片上不同的位置。

Answer 2

你可以用一个中间变量来保存上一张图片，如果完全显示就完全清除timer

Answer 3

你看一下google主页的代码，看看对你有帮助吗？

Answer 4

只是goole的图片 随便模仿一下
他那代码写的就不是想让一般人能看懂的
怪异的写法+怪异的变量名+怪异的思路===非常怪异（能看懂 我的技术起码能进几个档次）

Answer 5

google的js应该是被混淆过了的 呵呵
我瞄瞄这题啥意思啊

Answer 6

GOOGLE的代码不知道他用的什么混淆的

Answer 7

用timer数组 一个会混乱 传参数用不要用event了 直接传this
也就是一个div对应一个timer

Answer 8

一个div对应一个timer
不是很懂列
怎么区分每个timer

Answer 9

换个思路呢？<div id="ms">
<div  style=" width:50px; height:38px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png)"></div>
<div  style=" width:50px; height:38px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png); background-position:0px -35px"></div>
<div  style=" width:50px; height:38px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png); background-position:0px -70px"></div>
<div  style=" width:50px; height:38px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png); background-position:0px -107px"></div>
</div>
<script>
window.onload = function(){
var imgs = document.getElementById('ms').getElementsByTagName('div');
for(var i=0; i<imgs.length; i++){
var g = imgs[i], pos = g.style.backgroundPosition.split(' ');
g.tim = null;
g.r = 0;
g.t = pos[1]? parseInt(pos[1]) : 0;
g.onmouseover = function(){
var oThis = this;
if(this.tim) clearInterval(this.tim);
this.tim = setInterval(function(){
touch(oThis);
}, 100);
}
g.onmouseout = function(){
var oThis = this;
if(this.tim) clearInterval(this.tim);
this.tim = setInterval(function(){
restore(oThis);
},100);
}
}
} function touch(obj){
obj.r += 52;
if(obj.r >= 208){
clearInterval(obj.t);
obj.r = 208;
}
obj.style.backgroundPosition = '-' + obj.r + 'px ' + obj.t + 'px';
} function restore(obj){
obj.r -= 52;
if(obj.r <= 0){
clearInterval(obj.t);
obj.r  = 0;
obj.style.backgroundPosition = '0 ' + obj.t + 'px';
}else{
obj.style.backgroundPosition = '-' + obj.r + 'px ' + obj.t + 'px';
}
}
</script>

Answer 10

楼主要实现的是google的搜索最下面的那种效果吧？？有时间楼主自己去扣代码下来就好了

Answer 11

<div  style=" width:50px; height:38px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png)" onmouseover="touch(this,52,0)" onMouseOut="restore(this)" index=0></div>
<div  style=" width:50px; height:38px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png); background-position:0px -35" onmouseover="touch(this,52,-35)" onMouseOut="restore(this)" index=1></div>
<div  style=" width:50px; height:38px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png); background-position:0px -70" onmouseover="touch(this,52,-70)" onMouseOut="restore(this)" index=2></div>
<div  style=" width:50px; height:38px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png); background-position:0px -107" onmouseover="touch(this,52,-107)" onMouseOut="restore(this)" index=3></div>
<script>
var timer=[null,null,null,null]
var g=[0,0,0,0]
var sty=[new Array(),new Array(),new Array(),new Array()]  //记录图片位置的数组function touch(obj,a1,a2){
var f=0 
for(var i=0;i<5;i++)
{
sty[obj.index][i]="-"+f+"px"+" "+a2+"px";
f=f+a1
}                        //循环得出图片的位置
change(obj)
}function change(obj){  
clearTimeout(timer[obj.index])             //=======
if(g[obj.index]==sty[obj.index].length-1)
{
obj.style.backgroundPosition=sty[obj.index][g[obj.index]];
timer[obj.index]=setTimeout(function(){change(obj)},100)
}
else
{
obj.style.backgroundPosition=sty[obj.index][g[obj.index]]
g[obj.index]++
timer[obj.index]=setTimeout(function(){change(obj)},100)
}
}function restore(obj){
clearTimeout(timer[obj.index])        //================
if(g[obj.index]<1)
{clearTimeout(timer[obj.index]);
obj.style.backgroundPosition=sty[obj.index][0]
}
else
{
obj.style.backgroundPosition=sty[obj.index][g[obj.index]]
g[obj.index]--
timer[obj.index]=setTimeout(function(){restore(obj)},100)
}
}
</script>...

Answer 12

本想加点分的
可是现在确实有点穷 - -!
（B4:csdn把加分的途径给封了）

Answer 13

另一版本
<div id="ms">
<div  style=" width:50px; height:37px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png)"></div>
<div  style=" width:50px; height:37px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png); background-position:0px -35px"></div>
<div  style=" width:50px; height:37px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png); background-position:0px -70px"></div>
<div  style=" width:50px; height:37px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png); background-position:0px -107px"></div>
</div>
<script>
window.onload = function(){
var imgs = document.getElementById('ms').getElementsByTagName('div');
for(var i=0; i<imgs.length; i++){
var g = imgs[i], pos = g.style.backgroundPosition.split(' ');
g.tim = null;
g.r = 0;
g.t = pos[1]? parseInt(pos[1]) : 0;
g.tem = 0;
g.onmouseover = function(){
var oThis = this;
if(this.tim) clearInterval(this.tim);
this.tim = setInterval(function(){
touch(oThis);
}, 50);
}
g.onmouseout = function(){
var oThis = this;
if(this.tim) clearInterval(this.tim);
this.tim = setInterval(function(){
restore2(oThis);
},30);
}
}
} function touch(obj){
obj.r += 52;
if(obj.r >= 208){
clearInterval(obj.tim);
obj.r = 208;
obj.style.backgroundPosition = '-208px ' + (obj.t - 2) + 'px';
obj.tim = setInterval(function(){
touch2(obj);
},30);
return;
}
obj.style.backgroundPosition = '-' + obj.r + 'px ' + obj.t + 'px';
} function restore(obj){
obj.r -= 52;
if(obj.r <= 0){
clearInterval(obj.tim);
obj.r  = 0;
obj.tem = 0;
obj.style.backgroundPosition = '0 ' + obj.t + 'px';
return;
}else{
obj.style.backgroundPosition = '-' + obj.r + 'px ' + obj.t + 'px';
}
} function touch2(obj){
obj.tem +=1;
if(obj.tem >= 5){
clearInterval(obj.tim);
obj.tem = 5;
}
obj.style.backgroundPosition = '-208px ' + (obj.t+obj.tem-2) + 'px';
} function restore2(obj){
obj.tem -= 1;
if(obj.tem <=0){
clearInterval(obj.tim);
obj.tem = 0;
obj.style.backgroundPosition = '-208px ' + (obj.t-2) + 'px';
obj.tim = setInterval(function(){
restore(obj);
},50);
return;
}
obj.style.backgroundPosition = '-208px ' + (obj.t+obj.tem-2) + 'px';
}
</script>