首页 > 一个小动画函数,出了点问题,好像是关于setTimeout,不清楚,求大神帮帮看看

一个小动画函数,出了点问题,好像是关于setTimeout,不清楚,求大神帮帮看看

我创建了一个幻灯片显示框,显示框上方有两个超链接,我希望当鼠标放在第一个超链接上方,第一个图片会从隐藏区慢慢移动到显示框,放在第二个连接上,显示框出来第二个图片,第一个图片会重新移动到隐藏区,(注释:因为图片位置正常情况下不在显示框显示范围,而是隐藏在显示框旁边背后)下面是个移动函数,就是控制图片按照目标位置慢慢移动的函数

//创建动画函数
function move(elem1,elem2,x1,x2,interval)//elem1和leme2分别是两个元素节点,x1,x2是该节点的目标位置即:elem1.style.left和elem2.style.left
{
as=document.getElementsByTagName("a");//取得html文档的超链接,只有两个
for(var i=0;i<as.length;i++)
{if(as[i].mm){clearTimeout(as[i].mm)}}//如果超链接上有超时调用,清除超链接上的超时调用

x01=parseInt(elem1.style.left);
x02=parseInt(elem2.style.left);//x01,x02分别是两个元素的当前位置
elems=[elem1,elem2];
nums=[x01,x02];
xs=[x1,x2];//把元素,当前位置,目标位置分别存储在数组里

for(var i=0;i<nums.length;i++)
{if(nums[i]<xs[i]) {nums[i]++}
if(nums[i]>xs[i])  {nums[i]--}
elems[i].style.left=nums[i]+"px";

as[i].mm=setTimeout(function()move(elem1,elem2,x1,x2,interval)},interval);//对第i个超链接调用setTimeout()
}
}
//给两个超链接添加事件
as=document.getElementsByTagName("a");
as[0].onmouseover=function(){move(img1,img2,0,400,10)};//当目标位置为0时,图片就会显示在显示框
as[1].onmouseover=function(){move(img1,img2,-400,0,10)};

现在问题是:为什么鼠标放在第一个超链接上,第一个图片会按照显示在显示框,鼠标放在第二个超链接,第二个图片没有反应,应该显示第二个图片啊???


调用定时器的时候一定要先清除,再添加~
clearTimeout,然后再 setTimeout


as[i].mm=setTimeout(function()move杀了个{,另外在清除的时候把as[i].mm=null;然后再给他重新赋值试试

【热门文章】
【热门文章】