Bstop有关代码里面这个的应用不太懂,if(cur!=json[attr]) Bstop=false;这个看不太懂
<!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>
Youruncle1回答
-
stone310
首先明白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,那么就执行第三步的停止计时器
随时随地看视频慕课网APP
相关分类
JavaScript