JS動畫之鏈式運動與同時運動

2022-09-12 10:39:20 字數 941 閱讀 3857

一、鏈式運動

所謂的鏈式運動,就是在平常的動畫運動函式最後在傳入乙個引數,當第乙個動畫運動運動完後,檢測一下有沒有繼續傳入的引數,如果有的話就繼續執行這個引數,這樣重複下去就可以完成一套鏈式運動

var li=document.getelementbyid("li1");

li.onmouseover=function());

});}

li.onmouseout=function());

});}

function startmove(obj, attr, itarget, fn) else     //2.算速度

var speed = (itarget - icur) / 8;

speed = speed > 0 ? math.ceil(speed)  : math.floor(speed);

//3.檢測停止

if (icur == itarget)

} else else

}}, 30);

}function getstyle(obj, attr) else

}二、同時運動:最終封裝的'完美移動框架'

function startmove(obj, json, fn) else       //移動速度處理

var speed = 0;

speed = (json[attr] - curr) / 10;

speed = speed > 0 ? math.ceil(speed)  : math.floor(speed);

if (curr != json[attr])

if (attr == 'opacity') else

}if (flag)

}}, 30);

}//採樣式

function getstyle(obj, attr) else

}

Js運動動畫系列9 多物體同時運動 封裝運動框架

perfectmove.js 的完整版 perfectmove.js 可同時運動 無法實現同時運動 statmove obj,attr,itarget,fn 只能一次運動 執行一對鍵值,改用json可以實現同時運動 獲取目標元素樣式 function getstyle obj,attr else s...

js運動之緩衝運動

裡面核心就是讓他的速度與距離成為正比 距離大,速度大 距離小,速度小 距離 目標 原始 緩衝運動一定要取整 先來個例子 id div1 div type button value 緩衝運動 onclick startmove div1 style var timer null function st...

新浪微博之鏈式運動

1 要想類似高度的屬性達到自適應 1 獲取當前元素此屬性值var iheight offsethight 2 再把屬性值為0 3 引入完美運動框架,將iheight設為目標值 2 ul下加li會出現卡頓情況,原因是布局導致,解決方案是,將ul和li均換成div 3 html html head la...