課程
/前端開發
/JavaScript
/JS動畫效果
看了這個最后那個完美的運動框架發現一個問題,同時運動的定時器并沒有結束。。。。。定時器還在一直運行,只不過不在動畫了而已。
2014-09-03
源自:JS動畫效果
正在回答
//獲取當前樣式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } return getComputedStyle(obj,false)[attr]; } //運動框架 /** * @param obj * @param json * @param fn */ function startMove(obj,json,fn){ clearInterval(obj.timer); var size = (function(){ var tt = 0; for(var i in json){ tt++; } return tt; }()); obj.timer = setInterval(function(){ var count = 0;//判斷同時運動是否結束 for(var i in json){ //判斷透明度 var icur = 0; //獲取當前樣式 if(i=="opacity"){ icur = Math.round(parseFloat(getStyle(obj,i))*100); }else{ icur = parseInt(getStyle(obj,i)); } var iTarget = json[i]; //緩沖運動獲取speed (+ 越來越慢 -越來越慢) var ispeed = iTarget-icur>0?Math.ceil((iTarget-icur)/8):Math.floor((iTarget-icur)/8); //停止運動 if(icur != iTarget){ if(i=="opacity"){//透明度 obj.style.filter="alpha(opcoty:'"+(icur+ispeed)+")"; obj.style.opacity=(icur+ispeed)/100; }else{ obj.style[i] = icur+ispeed+"px"; } }else{ count++; //判斷所有運動是否結束 if(count==size){ clearInterval(obj.timer); if(fn){ fn(); } } } } },30); }
舉報
通過本課程JS動畫的學習,從簡單動畫開始,逐步深入各種動畫框架封裝
2 回答為什么總是報錯說不能解析opacity,聲明被丟棄
1 回答我的代碼怎么沒反應啊 ???//
2 回答aLi[i].timer = null;這里的timer是數組下標嗎?timer并沒有被var,不是很明白定時器編號;
3 回答如何下面代碼中div2的透明度和寬高同時變化?
3 回答obj.style.width
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2014-09-03
//獲取當前樣式
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
return getComputedStyle(obj,false)[attr];
}
//運動框架
/**
* @param obj
* @param json
* @param fn
*/
function startMove(obj,json,fn){
clearInterval(obj.timer);
var size = (function(){
var tt = 0;
for(var i in json){
tt++;
}
return tt;
}());
obj.timer = setInterval(function(){
var count = 0;//判斷同時運動是否結束
for(var i in json){
//判斷透明度
var icur = 0; //獲取當前樣式
if(i=="opacity"){
icur = Math.round(parseFloat(getStyle(obj,i))*100);
}else{
icur = parseInt(getStyle(obj,i));
}
var iTarget = json[i];
//緩沖運動獲取speed (+ 越來越慢 -越來越慢)
var ispeed = iTarget-icur>0?Math.ceil((iTarget-icur)/8):Math.floor((iTarget-icur)/8);
//停止運動
if(icur != iTarget){
if(i=="opacity"){//透明度
obj.style.filter="alpha(opcoty:'"+(icur+ispeed)+")";
obj.style.opacity=(icur+ispeed)/100;
}else{
obj.style[i] = icur+ispeed+"px";
}
}else{
count++;
//判斷所有運動是否結束
if(count==size){
clearInterval(obj.timer);
if(fn){
fn();
}
}
}
}
},30);
}