DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 12個ajax彈出層效果
12個ajax彈出層效果
編輯:AJAX詳解     
12個AJax彈出層效果JS代碼,功能都很強大。

Thickbox - 基於 jQuery,支持 AJax,輕量級的而且比較高效。支持圖片與Html內容。大小約為 40k,目前還可作為 WordPress 的插件使用。這個JS的優點在於與,父級的原頁面滾動條隨鼠標滾動的時候,彈出的層並不移動,而始終處於浏覽器的固定位置。


彈出層模態化窗口

GreyBox - 創建 iframe 的彈出界面,可使用圖片、Html 及 URL,大小約為 20k。

這個彈出層效果有固定位置與隨父級的滾動條滾動兩種模式。

彈出層模態化窗口

GreyBox Redux - 基於 jQuery,比 GreyBox 更輕。

這個JS的的彈出效果增加了自上而下緩慢滑出的效果。
彈出層

Lightbox v2.0 - 最初是為了顯示圖片設計的,使用了 prototype 和 sciptaculous,所以有些沉重,但對於圖片來說很好用。

缺點就是彈出層出來後,滾動鼠標滾輪,父級頁面與彈出內容同事隨著滾動條,只有點擊關閉按鈕才能關閉彈出層,對於彈出圖片較大的時候,用戶體驗方面相對比較不友好,需要移動頁面找到關閉按鈕才行。

Lightbox Gone Wild - modal 模式窗口的 lightbox,可使用 Html、表單及圖片,也是基於 prototype 的。

這個效果的好處在於,彈出內容是圖片時,點擊圖片本身既可以關閉彈出層,非常方便。
彈出層

Multi-faceted LIghtbox - 又一個基於 prototype 的,不過這個為各種可用於 lightbox 的數據類型提供了選項。

Leightbox - 和 Lightbox Gone Wild 很相似,只是 Leightbox 以 Html 方式存放內容,所以可以被搜索引擎索引到。

除了彈出內容符合SEO以外,這個效果的一大特點是,彈出後父級頁面的滾動被禁用,而以彈出層的滾動為主,這樣在彈出的窗口有較多內容時,滾動鼠標滾輪時,就不會同時滾動父級頁面,而影響正常浏覽。
彈出層

xilinus - 使用簡單,基於 prototype,很容易定制,可使用多種內容選項。

Lightbox Plus - 可以自動根據窗口的大小縮放圖片。

Suckerfish Hover Lighbox - 和傳統的 lightbox 不一樣,它在打開 lightbox 的時候,還可以點擊訪問頁面上的其它元素。

Litebox - 這是 Lightbox 的另一個版本,代碼量減少了,使用了 moo.fx 和 prototype-lite,如果頁面需要減肥的話,可以選擇這個。

LITBox - 使用類寫的 lightbox,所以可以創建多個對象實例,並且單獨進行控制。基於 Thickbox。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved