<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div { width: 200px; height: 200px; background: red; filter: alpha(opacity: 30); opacity: 0.3; } </style> <script type="text/javascript"> window.onload=function(){ var odiv=document.getElementById("div1"); odiv.onmouseover=function(){ startMove(this,{width:400}) } odiv.onmouseout=function(){ startMove(this,{width:200}) } } function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ return getComputedStyle(obj,false)[name]; } } function startMove(obj,json,fnend){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var Bstop=true; for (var attr in json) { if(attr=="opacity"){ cur=Math.round(parseFloat(getStyle(obj,attr))*100) } else{ cur=parseInt(getStyle(obj,attr)) } } var speed=(json[attr]-cur)/6; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur!=json[attr]) Bstop=false; if(attr=="opacity"){ obj.style.filter="alpha(opacity"+(speed+cur)+")"; obj.style.opacity=(speed+cur)/100 } else{ obj.style[attr]=speed+cur+"px" } if(Bstop){ clearInterval(obj.timer) if(fnend)fnend(); } }) } </script> </head> <body> <div id="div1"> </div> </body></html>
1 回答
stone310
TA贡献361条经验 获得超191个赞
首先明白Bstop的作用，是为了检测最后所有属性的值是否达到目标值(即动画是否全部完成)，是怎么检测的呢，分三步
第一步，startMove这个函数是通过计时器不断调用来完成动画效果，那么它每次调用的时候Bstop都赋值为true(var Bstop=true)
第二步，if(cur!=json[attr])Bstop=false;是用来判断当前元素的属性值是否不等于你设定的目标值(即动画是否还有没完成的)，如果不等于，那么Bstop就是false，这里if后面没有{}，说明如果条件成立，只执行第一条语句，即Bstop=false;
第三步，最后那里有个if(Bstop){},相当于if(Bstop==true)就停止计时器,
现在可以发现，如果第二步有动画没完成，那么Bstop是false,则第三步不成立，计时器不会停止，然后计时器继续调用第一步，Bstop又变成true(第一步),然后继续第二步，第三步，直到所有动画完成，到了第三步Bstop还是true,那么就执行第三步的停止计时器
添加回答
举报
0/150
提交
取消