JavaScript 漸層效果頁面圖片控制第1/2頁

使用該程式能實現很多常見的動畫特效，包括大小變換、位置變換、漸顯漸隱等等。
程式說明： 漸層效果的原理就是利用定時器不斷設定值，如果要減速效果就設定一個步長（詳細看JavaScript 彈簧效果） 。
這裡只是把能漸層的屬性（透明度、寬、高、left、top）整合在一起，使用相同的漸層級數（Step）使漸層同步，形成多個屬性同時漸層的效果。

下面說說有用的地方：
【最終樣式】
在JavaScript 圖片切割效果的邊寬擷取中也說到了最終樣式，在使用offset擷取的資料設定寬度高度的時候，必須先減去最終樣式中的邊框寬度。
在這裡我使用了muxrwc的在FF下實現currentStyle方法，這樣在ff和ie都可以從currentStyle擷取最終樣式了： 複製代碼 代碼如下:if(!isIE){
HTMLElement.prototype.__defineGetter__("currentStyle", function () {
return this.ownerDocument.defaultView.getComputedStyle(this, null);
});
}

使用這個擷取邊框寬度： 複製代碼 代碼如下:this._xBorder = function(){ return (parseInt(obj.currentStyle.borderLeftWidth) + parseInt(obj.currentStyle.borderRightWidth)); }
this._yBorder = function(){ return (parseInt(obj.currentStyle.borderTopWidth) + parseInt(obj.currentStyle.borderBottomWidth)); }

【寬度或高度優先】
寬度或高度優先其實就是先執行其中一個漸層，在完成後再執行另一個漸層。
漸層程式中在執行完一次漸層之後會返回一個bool值表示是否漸層完成，利用這個可以這樣： 複製代碼 代碼如下:this.SetWidth() && this.SetHeight();

由於&&的特性，當this.SetWidth()返回true時才會去執行this.SetHeight()，這也是不錯的技巧。
同時為了同步漸層，另外的漸層使用了兩倍的步長： 複製代碼 代碼如下:this.Step = 2*this.Step;
this.SetOpacity(); this.SetTop(); this.SetLeft();
this.Step = this.Step/2;

這樣就能做出寬度或高度優先的效果了。

【定點漸層】
先說說原理，例如以寬度中點為參照點，可以想象如果寬度減少n，那隻要left相對增加n*0.5（即n/2），
那麼就可以做出以中點為中心變換的效果（當然要先把變換對象設為相對或絕對位置）。
那這個“0.5”怎麼來的呢？有點數理知識應該知道就是漸層對象左邊到變換點跟漸層對象總寬度的比
程式裡用Width.pos儲存這個值，在變換前先計算好變換點的位置：

this._x = this._obj.offsetLeft + this._obj.offsetWidth * this.Width.pos;
每次變換都根據這個位置和寬度來重新設定left：

this._obj.style.left = this._x - this._obj.offsetWidth * this.Width.pos + "px";

可能有人會說直接在原有left基礎上加上變換寬度*Width.pos不是一樣嗎？
但問題是經過多次的變換計算（到達目標值前會有多次計算）之後得到的值已經不準確了。
因為在變換計算過程中很多小數會被忽略，隨著計算次數增多結果的出入也越大，
所以先定好變換位置參照值（_x），這樣不論經過多少次計算變換位置都不會走位了。

同理只要設定不同的Width.pos（包括負數和大於1的數）和Height.pos就可以以任意點為中心漸層了。

還有就是程式的設計也花了不少心思，為了提高整合度，做了一個FadeStruct的結構，其中run、start、end、target屬性分別是是否漸層、開始值、結束值、目標值。
用了兩次的Object.extend來設定預設值，詳細可以看程式。

使用說明：

必要的參數只有一個，就是漸層對象，不過只有漸層對象是沒有效果的，必須設定其他屬性：
Opacity:透明漸層參數
Height:高度漸層參數
Width:寬度漸層參數
Top:Top漸層參數
Left:Left漸層參數
Step:10,//變動率
Time:10,//變化間隔
Mode:"both",//漸層順序
Show:false,//是否預設開啟狀態
onFinish:function(){}//完成時執行

其中Opacity、Height、Width、Top、Left比較特別，是FadeStruct結構

例子裡執行個體化這個對象： 複製代碼 代碼如下:

var f = new Fade("idFade", { Show: true,
Opacity: { run: true },
Height: { run: true },
Width: { run: true, pos: .5 },
Top: { run: true, end: 70 }
});

設定run為true就表示開啟這個變換，start和end是開始和結束值，pos是Height和Width特有的變換位置屬性。

更詳細的應用可以看執行個體。