當(dāng)前位置：前端里 > 前端開(kāi)發(fā) > 正文

　　燈箱效果（Lightbox）是網(wǎng)站中最常用的效果之一，用于實(shí)現(xiàn)類(lèi)似模態(tài)對(duì)話框的效果。網(wǎng)絡(luò)上各種 Lightbox 插件琳瑯滿目，隨著響應(yīng)式設(shè)計(jì)（Respnsive Design）的發(fā)展，這一先進(jìn)理念也被引入了 Lightbox 插件之中。

　　這篇文章挑選了12款優(yōu)秀的響應(yīng)式 Lightbox（燈箱）效果插件分享給大家，這些插件能夠幫助你在網(wǎng)站加入引人注目的燈箱效果。

這款響應(yīng)式燈箱效果插件包含社會(huì)化媒體分享功能，效果精美！主要特色：

?  支持Retina屏幕

?  可以分享到 Twitter、Facebook、Pinterest 和 Google+

?  支持移動(dòng)設(shè)備的觸摸滑動(dòng)

?  能夠全屏展示

?  可以自定義縮略圖顯示

插件下載     效果演示

非常優(yōu)秀的一款基于 jQuery 的響應(yīng)式 Lightbox 效果插件！主要特色：

?  支持展示視頻

?  支持縮略圖模式

?  支持移動(dòng)設(shè)備的觸摸滑動(dòng)

?  支持全屏顯示

?  有完善和文檔和使用教程

使用簡(jiǎn)單，垃圾箱，示例代碼：

<a data-target="flare" href="large_image.jpg" data-flare-scale="fit" > <img src="small_image.jpg" alt="small image" /> </a>

插件下載     效果演示

fancyBox 是最流行的 Lightbox 插件之一，可以通過(guò) fitToView 實(shí)現(xiàn)自適應(yīng)功能。主要特色：

?  能夠顯示圖片、HTML元素、SWF影片、iframe框架和Ajax請(qǐng)求的內(nèi)容

?  可以通過(guò)配置和 CSS 自定義外觀和功能

?  一組內(nèi)容可以實(shí)現(xiàn)導(dǎo)航

?  支持滾動(dòng)事件驅(qū)動(dòng)瀏覽

?  在放大項(xiàng)目下方有漂亮的投影

插件下載     效果演示

全新版本的 fancyBox，以優(yōu)雅的方式瀏覽圖片并能夠進(jìn)行縮放。

完全的響應(yīng)式設(shè)計(jì)，能夠快速響應(yīng)瀏覽器的尺寸變化。主要特色：

?  響應(yīng)式設(shè)計(jì)

?  集成幻燈片功能

?  漂亮的圖片切換效果

?  文檔完整，使用簡(jiǎn)單

?  支持高度自定義

插件下載     效果演示

MetroBox 響應(yīng)式燈箱效果插件內(nèi)置評(píng)論功能，主要特色：

?  每項(xiàng)內(nèi)容都帶有評(píng)論框

?  能夠輕松分組展示

?  支持移動(dòng)設(shè)備的觸摸滑動(dòng)

?  使用 Ajax 方式加載

?  支持所有的 HTML 內(nèi)容

插件下載     效果演示

Foobox 是一款 WordPress 插件，能夠在網(wǎng)站中實(shí)現(xiàn)響應(yīng)式圖片燈箱展示，內(nèi)置社會(huì)化媒體分享功能。

精美示例：

插件下載     效果演示

Shadowbox 是一個(gè)基于Web 的多媒體應(yīng)用程序，支持網(wǎng)絡(luò)上所有主流的媒體格式。

支持高度定制，使用 handleOversize 參數(shù)可以實(shí)現(xiàn)對(duì)瀏覽器尺寸的自適應(yīng)，主要特色：

?  不依賴于框架，能夠獨(dú)立使用

?  支持用戶高度自定義

?  使用靈活，可以呈現(xiàn)各種多媒體格式。

?  整潔、緊湊、輕量

?  能夠很好的播放多媒體

插件下載     效果演示

另外一款響應(yīng)式 Lightbox 插件，界面精美，使用 MIT 許可協(xié)議，垃圾箱，對(duì)于開(kāi)發(fā)者來(lái)說(shuō)是個(gè)好消息。