課程
/前端開發
/JavaScript
/JS動畫效果
代碼哪里錯了。
2016-12-27
源自:JS動畫效果 6-2
正在回答
function startMove(obj,json,fn){ ? ? ? ? ? ? ? ?clearInterval(obj.timer); ? ? ? ? ? ? ? ?obj.timer=setInterval(function(){ ? ? ? ? ? ? ? ? ? ?var flag=true; ? //標志所有運動是否到達目標值 ? ? ? ? ? ? ? ? ? ?for(var attr in json){ ? ? ? ? ? ? ? ? ? ? ? ?var curr=0; //獲取當前的值,設置為0下面進行賦值 ? ? ? ? ? ? ? ? ? ? ? ?//判斷是否為透明度 ? ? ? ? ? ? ? ? ? ? ? ?if(attr=='opacity'){ ? ? ? ? ? ? ? ? ? ? ? ? ? ?curr=Math.round(parseFloat(getStyle(obj,attr))*100); //對透明度處理 ? ? ? ? ? ? ? ? ? ? ? ?}else{ ? ? ? ? ? ? ? ? ? ? ? ? ? ?curr=parseInt(getStyle(obj,attr)); //對普通的寬高處理 ? ? ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ? ? ?//移動速度處理 ? ? ? ? ? ? ? ? ? ? ? ?var speed=0; ? ? ? ? ? ? ? ? ? ? ? ?speed=(json[attr]-curr)/8; //json[attr]為屬性值即目標值 ? ? ? ? ? ? ? ? ? ? ? ?speed=speed>0?Math.ceil(speed):Math.floor(speed); //取整數,將速度取整從而達到目標值//檢測停止 ? ? ? ? ? ? ? ? ? ? ? ?if(curr!= json[attr]){ ? ? ? ? ? ? ? ? ? ? ? ? ? ?flag=false;//檢測為false則繼續下面的操作 ? ? ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ? ? ?if (attr=='opacity') { ? ? ? ? ? ? ? ? ? ? ? ? ? ?obj.style.filter='alpha(opacity:'+(curr+speed)+")";//IE瀏覽器 ? ? ? ? ? ? ? ? ? ? ? ? ? ?obj.style.opacity=(curr+speed)/100;//firefox瀏覽器 ? ? ? ? ? ? ? ? ? ? ? ?}else{ ? ? ? ? ? ? ? ? ? ? ? ? ? ?obj.style[attr]=curr+speed+'px'; ? ? ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ?if(flag){ //檢測為true則繼續下面的操作 ? ? ? ? ? ? ? ? ? ? ? ?clearInterval(obj.timer); ? ? ? ? ? ? ? ? ? ? ? ?if(fn){ ?//檢測是否有回調函數,有就執行 ? ? ? ? ? ? ? ? ? ? ? ? ? ?fn(); ? ? ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ?},30); ? ? ? ? ? ?}
for( var attr in json){}要放在定時器里面
舉報
通過本課程JS動畫的學習,從簡單動畫開始,逐步深入各種動畫框架封裝
2 回答求大神幫看看哪里寫錯了? 沒有效果
1 回答誰有這節課講的完美運動框架的源代碼???發我一份好不好?
2 回答老師的完美運動框架有bug
1 回答完美運動框架問題,鼠標放上去有效果,離開后透明度沒有變回來
8 回答完美運動框架,不能實現鏈式運動哇!
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-01-18
function startMove(obj,json,fn){
? ? ? ? ? ? ? ?clearInterval(obj.timer);
? ? ? ? ? ? ? ?obj.timer=setInterval(function(){
? ? ? ? ? ? ? ? ? ?var flag=true; ? //標志所有運動是否到達目標值
? ? ? ? ? ? ? ? ? ?for(var attr in json){
? ? ? ? ? ? ? ? ? ? ? ?var curr=0; //獲取當前的值,設置為0下面進行賦值
? ? ? ? ? ? ? ? ? ? ? ?//判斷是否為透明度
? ? ? ? ? ? ? ? ? ? ? ?if(attr=='opacity'){
? ? ? ? ? ? ? ? ? ? ? ? ? ?curr=Math.round(parseFloat(getStyle(obj,attr))*100); //對透明度處理
? ? ? ? ? ? ? ? ? ? ? ?}else{
? ? ? ? ? ? ? ? ? ? ? ? ? ?curr=parseInt(getStyle(obj,attr)); //對普通的寬高處理
? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ?//移動速度處理
? ? ? ? ? ? ? ? ? ? ? ?var speed=0;
? ? ? ? ? ? ? ? ? ? ? ?speed=(json[attr]-curr)/8; //json[attr]為屬性值即目標值
? ? ? ? ? ? ? ? ? ? ? ?speed=speed>0?Math.ceil(speed):Math.floor(speed); //取整數,將速度取整從而達到目標值
//檢測停止
? ? ? ? ? ? ? ? ? ? ? ?if(curr!= json[attr]){
? ? ? ? ? ? ? ? ? ? ? ? ? ?flag=false;//檢測為false則繼續下面的操作
? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ?if (attr=='opacity') {
? ? ? ? ? ? ? ? ? ? ? ? ? ?obj.style.filter='alpha(opacity:'+(curr+speed)+")";//IE瀏覽器
? ? ? ? ? ? ? ? ? ? ? ? ? ?obj.style.opacity=(curr+speed)/100;//firefox瀏覽器
? ? ? ? ? ? ? ? ? ? ? ?}else{
? ? ? ? ? ? ? ? ? ? ? ? ? ?obj.style[attr]=curr+speed+'px';
? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?if(flag){ //檢測為true則繼續下面的操作
? ? ? ? ? ? ? ? ? ? ? ?clearInterval(obj.timer);
? ? ? ? ? ? ? ? ? ? ? ?if(fn){ ?//檢測是否有回調函數,有就執行
? ? ? ? ? ? ? ? ? ? ? ? ? ?fn();
? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?},30);
? ? ? ? ? ?}
2016-12-27
for( var attr in json){}要放在定時器里面