|
|
程序說明： 漸變效果的原理就是利用定時器不斷設(shè)置值，如果要減速效果就設(shè)置一個步長（詳細看JavaScript 彈簧效果） 。
這里只是把能漸變的屬性（透明度、寬、高、left、top）整合在一起，使用相同的漸變級數(shù)（Step）使?jié)u變同步，形成多個屬性同時漸變的效果。
下面說說有用的地方：
【最終樣式】
在JavaScript 圖片切割效果的邊寬獲取中也說到了最終樣式，在使用offset獲取的數(shù)據(jù)設(shè)置寬度高度的時候，必須先減去最終樣式中的邊框?qū)挾取?
在這里我使用了muxrwc的在FF下實現(xiàn)currentStyle方法，這樣在ff和ie都可以從currentStyle獲取最終樣式了：
復(fù)制代碼 代碼如下:
if(!isIE){
HTMLElement.prototype.__defineGetter__("currentStyle", function () {
return this.ownerDocument.defaultView.getComputedStyle(this, null);
});
}
使用這個獲取邊框?qū)挾龋?
復(fù)制代碼 代碼如下:
this._xBorder = function(){ return (parseInt(obj.currentStyle.borderLeftWidth) + parseInt(obj.currentStyle.borderRightWidth)); }
this._yBorder = function(){ return (parseInt(obj.currentStyle.borderTopWidth) + parseInt(obj.currentStyle.borderBottomWidth)); }
【寬度或高度優(yōu)先】
寬度或高度優(yōu)先其實就是先執(zhí)行其中一個漸變，在完成后再執(zhí)行另一個漸變。
漸變程序中在執(zhí)行完一次漸變之后會返回一個bool值表示是否漸變完成，利用這個可以這樣：
復(fù)制代碼 代碼如下:
this.SetWidth() && this.SetHeight();
由于&&的特性，當this.SetWidth()返回true時才會去執(zhí)行this.SetHeight()，這也是不錯的技巧。
同時為了同步漸變，另外的漸變使用了兩倍的步長：
復(fù)制代碼 代碼如下:
this.Step = 2*this.Step;
this.SetOpacity(); this.SetTop(); this.SetLeft();
this.Step = this.Step/2;
這樣就能做出寬度或高度優(yōu)先的效果了。
【定點漸變】
先說說原理，例如以寬度中點為參照點，可以想象如果寬度減少n，那只要left相對增加n*0.5（即n/2），
那么就可以做出以中點為中心變換的效果（當然要先把變換對象設(shè)為相對或絕對定位）。
那這個“0.5”怎么來的呢？有點數(shù)理知識應(yīng)該知道就是漸變對象左邊到變換點跟漸變對象總寬度的比
程序里用Width.pos保存這個值，在變換前先計算好變換點的位置：
this._x = this._obj.offsetLeft + this._obj.offsetWidth * this.Width.pos;
每次變換都根據(jù)這個位置和寬度來重新設(shè)置left：
this._obj.style.left = this._x - this._obj.offsetWidth * this.Width.pos + "px";
可能有人會說直接在原有l(wèi)eft基礎(chǔ)上加上變換寬度*Width.pos不是一樣嗎？
但問題是經(jīng)過多次的變換計算（到達目標值前會有多次計算）之后得到的值已經(jīng)不準確了。
因為在變換計算過程中很多小數(shù)會被忽略，隨著計算次數(shù)增多結(jié)果的出入也越大，
所以先定好變換位置參照值（_x），這樣不論經(jīng)過多少次計算變換位置都不會走位了。
同理只要設(shè)置不同的Width.pos（包括負數(shù)和大于1的數(shù)）和Height.pos就可以以任意點為中心漸變了。
還有就是程序的設(shè)計也花了不少心思，為了提高整合度，做了一個FadeStruct的結(jié)構(gòu)，其中run、start、end、target屬性分別是是否漸變、開始值、結(jié)束值、目標值。
用了兩次的Object.extend來設(shè)置默認值，詳細可以看程序。
使用說明：
必要的參數(shù)只有一個，就是漸變對象，不過只有漸變對象是沒有效果的，必須設(shè)置其他屬性：
Opacity:透明漸變參數(shù)
Height:高度漸變參數(shù)
Width:寬度漸變參數(shù)
Top:Top漸變參數(shù)
Left:Left漸變參數(shù)
Step:10,//變化率
Time:10,//變化間隔
Mode:"both",//漸變順序
Show:false,//是否默認打開狀態(tài)
onFinish:function(){}//完成時執(zhí)行
其中Opacity、Height、Width、Top、Left比較特別，是FadeStruct結(jié)構(gòu)
例子里實例化這個對象：
復(fù)制代碼 代碼如下:
var f = new Fade("idFade", { Show: true,
Opacity: { run: true },
Height: { run: true },
Width: { run: true, pos: .5 },
Top: { run: true, end: 70 }
});
設(shè)置run為true就表示開啟這個變換，start和end是開始和結(jié)束值，pos是Height和Width特有的變換位置屬性。
更詳細的應(yīng)用可以看實例。
JavaScript技術(shù)：JavaScript 漸變效果頁面圖片控制第1/2頁，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
