昨天在微博上看到一個 ubuntu 3D desktop 的演示視頻，就是上面那個，大家可以看看。我對其中一個效果非常感興趣，查了下資料，應該是叫 Dodge Effect。心血來潮當晚就做了一個demo來實現這種效果。看下面的demo，你可以分別點擊每個色塊，就當作是不同窗口切換就行。
下面我就簡單把我開發時的思路給大家介紹一下。因為這不是單純的修改某個 div 的 z-index 值就能實現，加上動畫效果，所以我們第一步一定要先理清思路。
首先我們先做個最簡單的，也就是不帶動畫效果的。這一步沒什么好說的，也沒技術含量，直接看演示吧。
做好這一步后，我們回過頭想一想動畫效果是怎樣的？當我點擊底下某個窗口后，覆蓋在其上面的窗口依次滑動到對象下面。
ok，知道接下來要做什么了，就是如何判斷哪些窗口是點擊對象上面的，因為窗口可能並排排放，沒有疊加在一起，這樣在切換的時候就不應該出現動畫效果。
至於如何判斷，其實很簡單，依據四角坐標，看下圖
我們假設要點擊藍色窗口，那么覆蓋在其上面一共有4個紅色窗口，我們可以看到這4個紅色窗口都有一個角是處於藍色窗口里面的。
這樣我們就大致可以理出思路了，就是只要當窗口的z-index值大於被點擊的窗口，並且窗口只要其中一個角的坐標處於被點擊窗口內部，則就可以判斷該窗口是覆蓋在被點擊窗口之上的（判斷窗口是否覆蓋的算法已更新，地址：http://www.cnblogs.com/hooray/p/3193801.html）。具體可以看下這個演示，當點擊某個窗口時，會以此alert出覆蓋在其上方的窗口的顏色。
完成上面功能，我們已經能篩選出哪些窗體是覆蓋在被點擊窗體上方的，按劇情發展，接下來是做動畫了么？
且慢，先別着急，還有一個工作沒做。讓我們滾回上面，再看一遍動畫效果。（滾動條的“滾”）
可以觀察到，有的窗口動畫是往左移，有的則是往右移，那應該如何判斷哪些往左，哪些又往右呢？對了，就是用中心軸來判斷。
假設我們點擊紅色窗口，覆蓋在其上方的一共有藍黃兩個窗口，其中心軸一個位於紅色窗口中心軸左邊，一個位於右邊，則我們就可以按照這個來判斷執行動畫的窗口應該往哪個方向移動。
下面這個演示可以嘗試點擊不同窗口，看下提示信息。
除了知道往哪個方向移動之外，我們還要知道移動多少距離，這個我就不細說了，直接看演示吧。
完成上面幾步，我們終於要開始寫動畫了。（上面統計的一些信息，我們都可以放到一個數組對象里，比如需要移動的窗體ID，或者class名，往什么方向移動，移動多少距離）
思路無非就是循環對象數組，依次對需要移動的窗體進行綁定animate動畫。唯一需要關注的就是，因為動畫效果是有個持續時間的，什么時候修改被點擊窗口的z-index尤其重要，如果做不好，觀賞性就大大下降了。
下面我的做法就是用setTimeout來延遲執行。
似乎還是有點不一樣，繼續滾回上面看原版動畫，好像被移動的窗口是有個先后順序的，不是一起開始執行移動動畫。
ok，我們用delay方法來實現這個需求。我們初始一個dalayTime，默認為0，每次循環對象數組時給它加100，然后再用這個值去延遲執行的動畫效果，這樣每個窗體之間就有100毫秒的間隔了。
至此，我們已經一步步完成了 Dodge Effect 效果的模擬了，當然你也可以加上拖動代碼，甚至判斷什么情況下窗口是上下滑動的，下面直接看，就不做思路分析了：http://runjs.cn/detail/pav1hhdb