現在問題來了，這個版塊不大，更新頻率卻很高，每天都有十數條最新的資訊上去，瀏覽**的會員對於最新圖書的了解和需求越來越大，因此需要對這個板塊進行改良，以滿足會員的需求，會員的主要要求有以下幾個方面：顯示該最新上架的圖書的封面縮圖，該圖書的名稱和作者名稱，以及該書部分內容的介紹和作者的簡介...
這下把ben給愁壞掉了，首頁上根本就沒有多餘的空間，怎麼來呈現封面縮圖甚至是內容簡介，如果去掉別的板塊空間來實現這一板塊的擴張，無異於在一家公司以犧牲乙個部門來壯大另外乙個部門，這是萬萬不可取的...
於是ben想到了以彈出層的方式來顯示每條資訊的詳細內容...
設計目標:
在不改變頁面結構的情況下，以彈出層（用dom重構的方式來實現元素的追加append和移除remove）的方式提高頁面資訊量...
解決方案：
首先，我們設計乙個div，樣式如下：
複製** **如下:
.tipdiv
.tipdiv img
.tipdiv span
下面是指令碼，當滑鼠經過的時候才響應彈出框事件：
複製** **如下:
$(document).ready(function()
case "2":
case "3":
case "4":
} popdiv(imgs,name,word,x,y);
}) //標題滑鼠離開
$("ul li a").mouseout(function())
}) //隨滑鼠移動的資訊框
function popdiv(face,name,info,xx,yy)
);//設定該元素出現的位置（這裡是出現在滑鼠的右邊和下邊的偏離10px位置） }
結果如下（當滑鼠指向第三條資料時，彈出該框， 並隨滑鼠移動）：
做到這邊，會員有了乙個新的要求，就是不要彈出框隨著滑鼠的移動而移動，那樣滑鼠一旦離開焦點，就會移除該彈出框，操作起來不是很方便。他們要求彈出框固定，假設就在相應的資料行的右側吧，而且開啟和關閉由會員自己控制，於是ben就進行改良了...
同樣的，先設計乙個id為tips的div元素，樣式如下：
複製** **如下:
#tips
/* 彈出層的指向圖示，left：-10 使它出現在整個div的左側 */
#tips #tipsarrow
#tips #light
#tips span
#tips #close
指令碼如下：
複製** **如下:
$(document).ready(function())
}) //固定的資訊框
function popdiv1(tops,lefts,messages)
); }
function closeup()
最終顯示效果如下：
滑鼠移動到相應的資料行上面，顯示相應的提示框，右邊的打叉小圖示用以關閉整個彈出層...
設計小結：
這個設計過程的關鍵是position：absolute（絕對定位，作用是讓層在頁面上疊加），z-index（用以顯示層的疊加次序），top、left（顯示彈出頁面座標），（offset().left,offset().top）在頁面上找到某個元素的座標，位置找到了，就可以隨意在它的周邊定位彈出層了，其他的樣式可以根據自己的美工需求隨意調節...
原始碼**
本文標題: web前端設計模式 製作漂亮的彈出層
本文位址:
點讚打賞
分享如果認為本文對您有所幫助請贊助本站
標籤：彈出層
dom在ajax技術中的作用說明實用的多級樹形展開選單效果**
Web前端設計模式 製作漂亮的彈出層
設計場景 ben最近在負責乙個購書 在 的首頁上，有乙個叫做 最新上架 的板塊，板塊的內容比較簡單，只有書籍名稱，作者姓名和上架時間 如圖 當初設計的時候並i沒有過於豐富的構思.現在問題來了，這個版塊不大，更新頻率卻很高，每天都有十數條最新的資訊上去，瀏覽 的會員對於最新圖書的了解和需求越來越大，因...
Web 前端設計模式 Dom重構
1.設計場景 某個週末的早上躲在家裡睡大覺，突然我們老大 億網公司的技術總監 乙個 撥過來，他說 智華，你趕緊從床上跳起來，不要刷牙，不要洗臉，滾到電腦面前，開啟電腦，我們的印刷網 出問題了.此時不能責怪公司的伺服器爛，網速卡之類的，那樣很可能會導致老大對我一頓胖揍甚至扣獎金.所以只能從 效能方面進...
Web前端設計模式 jQuery驗證外掛程式
設計場景 這確實是乙個很糟糕的事情，即使你可以從之前的 見那些 拷貝進來，但是修改工作仍然會令你發狂.所以，我花了點時間將驗證做成乙個jquery外掛程式.設計目標 建立乙個基於jquery框架的通用web驗證外掛程式.設計要求 1.需要漂亮的css樣式及小圖示的潤飾.2.基於jquery框架.3....