                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動(dòng)畫效果

第79行//不能理解 json[i]-obj.num)<1 是到達(dá)目標(biāo)值為什么是 false

<!doctype?html>
<html>
<head>
????<meta?charset="UTF-8">
<title>利用-json-同步-運(yùn)動(dòng)</title>
<style>
*{
margin:0;
padding:0;}
#d{
width:220px;
height:150px;
float:left;
margin-top:100px;
position:absolute;
left:0px;
}
div{
width:600px;
height:650px;
}
div?ul{
width:600px;
height:650px;
background-color:#CCC;}
div?ul?li{
width:300px;
height:200px;
margin:10px?0?10px?0;
background-color:#C93;
border:1px?solid?#000;
filter:alpha(opacity=30);
opacity:0.3;}

</style>
???
</head>
<body>
<div>
??<ul?id="uly">
?????<li></li>
????????<li></li>
????????<li></li>
??</ul>
</div>


<script>
var?d=document.getElementById("uly");
var?ali=d.getElementsByTagName("li");

for(var?i=0;i<ali.length;i++){
ali[i].time=null;
ali[i].num;
ali[i].onmouseover=function(){dover(this,{width:350,height:300,opacity:100});}
ali[i].onmouseout=function(){dout(this,{width:300,height:200,opacity:30});}
}
//鼠標(biāo)進(jìn)入事件
function?dover(obj,json,fn){
clearInterval(obj.time);
obj.time=setInterval(function(){mov(obj,json,fn)},1);
}
//鼠標(biāo)移出事件
function?dout(obj,json,fn){
clearInterval(obj.time);
obj.time=setInterval(function(){mov(obj,json,fn)},1);
}
//進(jìn)行?運(yùn)動(dòng)的處理函數(shù)??attr?是樣式的屬性?通過傳入?yún)?shù)?可以讓?寬?高?的改變?調(diào)用同一個(gè)函數(shù)
function?mov(obj,json,fn){

for(var?i?in?json){

if(i=="opacity"){
obj.num=Math.round(parseFloat(getStyle(obj,i))*100);
}else{
obj.num=parseInt(getStyle(obj,i));}

if(Math.abs(json[i]-obj.num)<1){
var?flag=false;}//不能理解?json[i]-obj.num)<1?是到達(dá)目標(biāo)值?為什么是?false
var?v=(json[i]-obj.num)/20;
v=v>0?Math.ceil(v):Math.floor(v);
if(i=="opacity"){
obj.num=obj.num+v;
obj.style.filter="alpha(opacity:"+obj.num+")";
obj.style.opacity=obj.num/100;
}else{
obj.num=obj.num+v;
obj.style[i]=obj.num+"px";}
if(flag){clearInterval(obj.time);?//判斷?是否?所有的運(yùn)動(dòng)?都達(dá)到目標(biāo)值?
if(fn){fn();}else{};}


/*if(Math.abs(json[i]-obj.num)<1){
clearInterval(obj.time);
//當(dāng)上一個(gè)運(yùn)動(dòng)?結(jié)束時(shí)?開始下一個(gè)運(yùn)動(dòng)?叫?鏈?zhǔn)竭\(yùn)動(dòng)?
if(fn){fn();}else{};
}else{
var?v=(json[i]-obj.num)/20;
v=v>0?Math.ceil(v):Math.floor(v);
if(i=="opacity"){
obj.num=obj.num+v;
obj.style.filter="alpha(opacity:"+obj.num+")";
obj.style.opacity=obj.num/100;
}else{
obj.num=obj.num+v;
obj.style[i]=obj.num+"px";}
}*/
}
}
//獲取行內(nèi)樣式?如?不含邊框的?寬度?高度
function?getStyle(obj,attr){
if(obj.currentStyle){
return?obj.currentStyle[attr];
}else{
return?getComputedStyle(obj,false)[attr];}
}

</script>
????
????
</body>
</html>