JavaScript 建立運動框架的實作程式碼_基礎知識

封裝好的運動框架Move(obj,attr,iTarget),可直接呼叫：

可用於設定width、border、fontSize、marginLeft、opacity等許多常見屬性值的變速變化，以實現各種有趣效果。

相容於IE和FF。

複製程式碼 程式碼如下:

/********************
*
* IE-BUG:
* IE では、不透明度属性を設定する場合、不透明度属性を設定する必要があります不透明度の値を読み込む前に要素スタイルで変更します。
*
* obj: 要素オブジェクト。 attr: 引用符で囲まれた属性名。 iTarget: 属性のターゲット値。
*
*****************/

function Move(obj,attr,iTarget){
clearInterval(obj.timer);//前のタイマーを閉じて、同じオブジェクトに対して複数の Move() を呼び出すとタイマーが失敗する問題を解決します。同時にオーバーレイの問題も発生します。 obj.timer を使用して、Move() を呼び出す各オブジェクトに独自のタイマーを与え、複数のオブジェクトが Move() を同時に呼び出すときに同じタイマーを使用して、関連する干渉の問題が発生するのを防ぎます。
obj.timer=setInterval(function(){
var cur=0;//各瞬間の attr 属性の値を格納する変数を作成します
if(attr=="opacity") {
use using using using FF を使用して整数に丸めます(parseFloat(getStyle(obj,attr))*100); }
varspeed=(iTarget-cur)/10 ;//属性値の可変速変化を実現するために、減少速度speed変数を作成します
。
Speed=speed>0?Math.ceil(speed):Math.floor(speed);//ブラウザが1px未満の値を無視し、動きの終わりが丸められる問題を解決するための丸め処理目標値に数ピクセル足りない Itarget Question

;//current 値 cur に、減少する速度値を加えた値 Speed

if(attr=="opacity"){

// IE と FF にそれぞれ不透明度属性値

を設定します obj.style .filter = "alpha（" cur "）"; obj: 要素オブジェクト。名前: 属性名。

function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];//IE の場合
}else{
return getComputedStyle(obj, false)[name];//FF
}
}


の場合