<!doctype?html>
<html>
<head>
????<meta?charset="UTF-8">
<title>利用-json-同步-運動</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)進入事件
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);
}
//進行?運動的處理函數(shù)??attr?是樣式的屬性?通過傳入?yún)?shù)?可以讓?寬?高?的改變?調(diào)用同一個函數(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?是到達目標(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);?//判斷?是否?所有的運動?都達到目標(biāo)值?
if(fn){fn();}else{};}
?
?
/*if(Math.abs(json[i]-obj.num)<1){
clearInterval(obj.time);
//當(dāng)上一個運動?結(jié)束時?開始下一個運動?叫?鏈?zhǔn)竭\動?
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>
2015-11-10
大概看了下，“json[i]-obj.num”,兄弟你的這句意思是：“目標(biāo)值-當(dāng)前值”；那就應(yīng)該是:
if(json[i]-obj.num!=0)//當(dāng)“目標(biāo)值-當(dāng)前值”不為0時，即目的未達到，則flag=false； { ????flag=false; }你的是"json[i]-obj.num的絕對值<1",不知道是什么意思，當(dāng)其值為0時，目的就達到了，flag應(yīng)該為true了；但是你這樣寫，flag還是false。
其實，在81行后直接判斷v的值是否為0不就好了，
if(v!=0)//如果速度不為0說明，目的未達到，運行這里的代碼；顯然，當(dāng)速度為0時，目的達到，flag就不變， { ????flag=false; ????//這里將82行至88行的代碼搬過來，邏輯上來說更合理。 }（以上是我的看法，我沒有運行測試，你參考下）
2015-11-10
第59行 傳的參數(shù) 是 json 簡單的判斷 true false 好像沒什么用 ?