fancybox 是一款優秀的 jquery 彈出層展示插件

今天來跟大家分享一個優秀的 jquery 彈出層展示插件 fancybox。它除了能夠展示圖片之外，還可以展示 flash、iframe 內容、html 文字以及 ajax 調用，我們可以透過 css 來自訂外觀。

fancybox 特點：

1. 可以支援圖片、html 文字、flash 動畫、if🎜>可以支援圖片、html 文字、flash 動畫、if🎜>可以支援圖片、html 文字、flash 動畫、if🎜>可以支援圖片、html 文字、flash 1以及ajax 的支援；

2. 可以自訂播放器的css 樣式；

4. 可以以組的形式進行播放；

5. 如果將滑鼠滾動插件（mouse wheel plugin）包含進來的話fancybox 還能支援滑鼠滾輪滾動來翻閱圖片；

fancybox 播放器支援投影，更有立體的感覺。

fancybox 使用方法：

<script></script><script></script>

首先需要引入jquerybox

<script></script>

如果需要用transition（一些動畫效果）你還需要引入以下js：

<script></script>

如果需要支援滑鼠滾輪滾動效果你還需要引入以下js：

<link>

然後引入樣式表：

<a><img  alt="fancybox 是一款優秀的 jquery 彈出層展示插件" ></a>

之後在頁面上添加一個a 標籤：

其中a 標籤的href 中的圖片就是我們需要彈層顯示的大圖。

$("#single_image").fancybox();

最後調用fancybox 方法：

<a><img  alt="fancybox 是一款優秀的 jquery 彈出層展示插件" ></a><a><img  alt="fancybox 是一款優秀的 jquery 彈出層展示插件" ></a>

當然這只能顯示一張圖片，有時候我們可能需要做個相簿之所以類別的多張圖片，那麼可以用rel 屬性來建立圖片組（也就是fancybox 特點的第三點），如下程式碼：

$(".grouped_elements").fancybox();

呼叫方法也很簡單：

fancybox 參數：

fancybox 之所以優秀是因為它的參數配置很強大，幾乎可以滿足我們所有的需要。

官網網址：

http://fancybox.net/

以上就是本章的全部內容，更多相關教學請訪問jQuery影片教學！