window.onload?=?function(){
????var?li?=?document.getElementById('li1');
????li.onmouseover?=?function(){
????????startMove(li,{'width':400,'height':200})
????}
????li.onmouseout?=?function(){
????????startMove(li,{'width':200,'height':100})
????} ?
}
//運(yùn)動(dòng)框架?startMove函數(shù)
function?startMove(obj,json,fn){
????clearInterval(obj.timer);
????var?flag?=?true;
????//開(kāi)啟定時(shí)器
????obj.timer?=?setInterval(function(){
????????//遍歷json
????????for?(var?attr?in?json)?{
????????????var?speed?=?0;
????????????//取當(dāng)前值?icur
????????????if?(attr?==?'opacity')?{
????????????????var?icur?=?Math.round(parseFloat(getStyle(obj,attr))*100);
????????????}else{
????????????????var?icur?=?parseInt(getStyle(obj,attr));
????????????}
????????????//算速度:speed
????????????//目標(biāo)值:json[attr]
????????????if?(icur?<?json[attr])?{
????????????????speed?=?Math.ceil((json[attr]?-?icur)/8);
????????????}else{
????????????????speed?=?Math.floor((json[attr]?-?icur)/8);
????????????}
????????????//檢測(cè)停止
????????????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';
????????????}???
????????}
????????//動(dòng)畫(huà)結(jié)束時(shí),這里?flag?是怎么變成?true?的???????
????????if?(flag)?{
????????????clearInterval(obj.timer);
????????????if?(fn)?{fn()}
????????}?????????
????},30)
}
2018-09-14
視頻中flag的聲明位置應(yīng)該是寫(xiě)錯(cuò)了,實(shí)際上應(yīng)該是寫(xiě)在定時(shí)器內(nèi)。
視頻中為什么動(dòng)畫(huà)會(huì)停止?完全是因?yàn)閟peed歸0了,動(dòng)畫(huà)停止了,但實(shí)際上定時(shí)器并沒(méi)有停止,還在繼續(xù)運(yùn)行。
感謝 @紙丶兩面白? ?同學(xué)!