function antimate(obj,json){
//clearInterval(obj.timer)
obj.timer = setInterval(function(){
var flag = true;
for(var attr in json){
var current = parseInt(getStyle(obj,attr));
var ste = (json[attr] - current)/10;
var step = ste>0?Math.ceil(ste):Math.floor(ste);
obj.style[attr] = current + step +"px";
if(current!=json[attr]){
flag = false;
}
}
if(flag)
{
clearInterval(obj.timer);
console.log("定时器清除")
}
},30)
};
function getStyle(obj,attr){
if(window.getComputedStyle(obj,null)){
return window.getComputedStyle(obj,null)[attr]
}
else {
return obj.currentStyle[attr]
}
}
var div = document.getElementsByTagName("div")[0];
var lis = div.children[0].children;
for(var i=0;i<lis.length;i++)
{
lis[i].style.backgroundImage ="url(images/"+(i+1)+".jpg)";
lis[i].onmouseover = function()
{
for(var i=0;i<lis.length;i++)
{
antimate(lis[i],{width:100})
}
antimate(this,{width:800})
}
如果我注释掉一开始的清除计时器,那么在下面调用时,如果我只把鼠标放在第一个li上,控制台会输出第2,3,4,5个li的计时器结束,此时第一个li的计时器还在运行,但是width会卡在400左右哆嗦,据我的理解,此时应该只有一个计时器在运行,应该不存在计时器干扰,而且在计时器后面使用了if语句条件判断是否应该结束计时器,但是为什么在一开始还是要清除计时器,而且会出现这种bug,对此不解
kevinZee
慕运维7130634
相关分类