設計場景：
Ben最近在負責一個購書網站，在網站的首頁上，有一個叫做“最新上架”的板塊，板塊的內容比較簡單，只有書籍名稱，作者姓名和上架時間（如圖），當初設計的時候並i沒有過於豐富的構思...
現在問題來了，這個版塊不大，更新頻率卻很高，每天都有十數條最新的信息上去，瀏覽網站的會員對於最新圖書的了解和需求越來越大，因此需要對這個板塊進行改良，以滿足會員的需求，會員的主要要求有以下幾個方面：顯示該最新上架的圖書的封面縮略圖，該圖書的名稱和作者名稱，以及該書部分內容的介紹和作者的簡介...
這下把Ben給愁壞掉了，首頁上根本就沒有多余的空間，怎么來呈現封面縮略圖甚至是內容簡介，如果去掉別的板塊空間來實現這一板塊的擴張，無異於在一家公司以犧牲一個部門來壯大另外一個部門，這是萬萬不可取的...
於是Ben想到了以彈出層的方式來顯示每條信息的詳細內容...
設計目標:
在不改變頁面結構的情況下，以彈出層（用Dom重構的方式來實現元素的追加append和移除remove）的方式提高頁面信息量...
解決方案：
首先，我們設計一個Div，樣式如下：
代碼
下面是腳本，當鼠標經過的時候才響應彈出框事件：
代碼
結果如下（當鼠標指向第三條數據時，彈出該框， 並隨鼠標移動）：
做到這邊，會員有了一個新的要求，就是不要彈出框隨着鼠標的移動而移動，那樣鼠標一旦離開焦點，就會移除該彈出框，操作起來不是很方便。他們要求彈出框固定，假設就在相應的數據行的右側吧，而且打開和關閉由會員自己控制，於是Ben就進行改良了...
同樣的，先設計一個id為tips的Div元素，樣式如下：
代碼
腳本如下：
代碼
最終顯示效果如下：
鼠標移動到相應的數據行上面，顯示相應的提示框，右邊的打叉小圖標用以關閉整個彈出層...
設計小結：
這個設計過程的關鍵是position：absolute（絕對定位，作用是讓層在頁面上疊加），z-index（用以顯示層的疊加次序），top、left（顯示彈出頁面坐標），（offset().left,offset().top）在頁面上找到某個元素的坐標，位置找到了，就可以隨意在它的周邊定位彈出層了，其他的樣式可以根據自己的美工需求隨意調節...