在這個教程中，我們將講解dojo 中的特效使用， 它將使你的網頁或應用更加有趣。
到目前為止，我們已經很容易操作dom 以及處理dom節點的事件。 可是， 我們在做這些動作時（刪除，新增節點等）， 過渡時會很生硬： 刪除乙個節點使它從乙個頁面中消失， 突然的消失會讓瀏覽者感到迷惑。 使用 dojo提供的標準特效， 我們可以流暢的使用者體驗。 更進一步， 如果我們在採用dojo/_base/fx 和dojo/fx模組， 我們鏈結和混全這些效果，創造更加眼花繚亂，動態的使用者體驗。
！* dojo 1.9 有兩個 fx 模組： dojo/_base/fx 和dojo/fx
有乙個動畫你可能已經在應用程式裡見過，那就是使乙個節點漸入或者漸出。 這個效果非常普通也很簡單， 它是 dojo/_base/fx核心效果的一部分。 我們可以使用它來在網頁中隱藏和顯示乙個元素，感覺起來會更流暢。下面是乙個例子：
fade block out
fade block in
a red block
所有的動畫函式都接受乙個引數: 乙個物件的屬性。 node 屬性是最重要的： 乙個dom節點或者 乙個節點的字串id. 別乙個屬性是 duration, 動畫持續的時間，單位為毫秒。 duration預設的時間為350毫秒。 這裡還有其它的一些動畫屬性， 但 漸入和漸出不需要使用到。
檢視 demo
另外乙個你見過的效果是擦除效果： 當邊離開乙個內容，邊改變乙個節點的高度。 經常， 擦除效果在建立摺疊（下接選單）時非常有效。
wipe block out
wipe block in
a red block
擦除效果在 dojo/fx模組。 在這個例子中，我們給目標節點新增了乙個 wipe 的css類。 因為wipe 的函式操作的是節點的內容高度，而不是乙個確切的高度值。 "wipe"類設定目標節點的高度為"auto".
檢視 demo
目前為此我們講解了隱藏節點， 但如果我們想移動它們到某點該做什麼呢？ 漸入和漸隱或者擦除 都不能改變節點的位置。
slide block away
slide block back
a red block
檢視 demo
如之前討論的， 所有的動畫方法會返回乙個 dojo/_base/fx::animation 物件。 這些物件不僅僅提供 play或者pause來控制動畫。 也提供一系列可被我們監聽的事件， 事件為我們提供了在動畫開始， 執續，完成之後，可以做些其它的動作。 兩個非常重要也很常用的事件監聽是 beforebegin 和 onend
slide block away
slide block back
a red block
你可能已經注意到 beforebegin作為乙個屬性傳遞給引數物件。 原因在於確保動畫在建立時連線上 beforebegin。 因此，如果你在建立完動畫之後在 註冊 beforebegin事件， 你的事件處理器會在動畫的beforebegin處理器之後處理(不能用on(anim, "beforebegin",function(){}), 沒有暴露beforebegin, 只爆露出 "begin", "end", 但 "begin"是動畫開始時，而不是開始前。 將***作為物件的屬性， 你可以保證你的***最先執行。
檢視 demo
slide block away
slide block back
a red block
如你看到的， 我們建立了直接在fx.chain裡建立了一些效果， 當返回了dojo/_base/fx::animation 時立即呼叫 play方法開始整個動畫。 我們不能在動畫鏈裡開始單獨的動畫，但利用fx.chain的事件處理器可以。
dojo/fx提供的第二個方法是combine. combine將使多個動畫在同一時間執行。 dojo/_base/fx::animation 會在最長的動畫執行完後返回 onend事件。 讓我們看看這個例子:
slide block away
slide block back
a red block
假若這樣， fade 和 slideto不在是依次執行，還是同時執行。
使用fx.chian 和 fx.combine, 你可以建立一些非常複雜的動畫序列。 也因為 chain 和 combine 都會返回乙個 animation物件， 這樣chain 和 combine方法返回的結果又可以被鏈結或組合。 允許你從簡單的動畫，在到複雜的動畫。
檢視demo
使用dojo, 非常簡單的就能給你的網頁新增效果。 通過dojo/_base/fx和 dojo/fx模組，你可以對dom節點漸入和漸出， 也可以簡單的移動和擦除你的節點。 通過 鏈結和組合動畫可以建立更加高階的動畫。
可是， 如果你想做更多高階的事件時， 比如調整乙個dom節的高度，而未必將高度一直委縮到 0. 或許還會通過動畫來調整乙個背景顏色. 還有更多的動畫屬性，檢視
fx.animationproperty, 更詳細的內容會在下一教程中講解。
PC端網頁特效
動態得到相關元素的位置 大小 1.獲得元素距離帶有定位的父元素的位置 2.獲得元素自身的大小 返回的數值都不帶單位 offsettop 可以得到元素的偏移 位置 返回的不帶單位的數值 offsetleft offsetwidth 可以得到元素的大小 寬度和高度 是包含padding border w...
js簡易網頁特效
上一月 span nian 2022 span next 下一月 span p yue 一月 h5 title 日 li 一 li 二 li 三 li 四 li 五 li 六 li ul date ul div let date newdate 獲取預設時間物件 add 當頁面第一次進入時觸發一下 ...
網頁特效過渡功能
如何在網頁進入和離開時以特效如百葉窗，捲簾等效果顯示呢？其實很簡單，只要在網頁的標籤之間加乙個特別的就好了，具體如下 http equiv page enter 此屬性設定特效發生的時期，具體值有 page enter 進入頁面時期 page exit 離開頁面時期 site enter 進入 時期...