骑士归来之时
2017-04-24 11:42
function move(obj,json,fn){ var flag=true; clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ var icur=0; //判断传入的是否为opacity if(attr == "opacity"){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } var speed=(json[attr]-icur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); //判断是否全部达到最终形态,如没有继续函数 if(icur != json[attr]){ flag=false; } if(attr=="opacity"){ obj.style.filter="alpha(opacity:"+(icur+speed)+")"; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=(icur+speed)+"px"; } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } } }, 30); } //属性选择器 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('d1'), as=oDiv.getElementsByTagName('a'); for(var i=0;i<as.length;i++){ as[i].onmouseover=function(){ var _this=this.getElementsByTagName("i")[0]; move(_this,{top:-20,opacity:0},function(){ _this.style.top=40+'px'; move(_this,{top:20,opacity:100}); }); }; } } </script>
可以去学习下js的闭包。
看了另外一位同学的解释,需要把flag定义在定时器内,否则flag永远都是false,所以停不下来。导致这个原因
在18行后加入
else{
flag=true;
}
即可
JS动画效果
113925 学习 · 1443 问题
相似问题