本文實例講述了jQuery彈層插件jquery.fancybox.js用法。分享給大家供大家參考，具體如下：

fancybox是jquery的插件，功能強大。支持對放大的圖片添加陰影效果，對于一組相關的圖片添加導航操作按紐，除了能展示層外，還可以展示iframed內容， 通過css訂制樣式。配合其他插件，能實現更旋的效果。

這里給出官方下載以及實例地址：http://fancyapps.com/fancybox/

附帶給出本站下載地址。

到目前為止，fancybox的最新版本2.1.5，調用方法變了一些，參數也加了一些。在上面那個地址的最下面，有非常詳細的參數說明。下面簡單說一下使用過程。

1、要用fancybox，至少要加載二個文件

<script type="text/javascript" src="jquery.fancybox.js?v=2.1.2"></script><link rel="stylesheet" type="text/css" href="jquery.fancybox.css?v=2.1.2" media="screen" />

在這兒有一點讓我不爽，就是要加載css文件，jquery插件當中要加載css文件的并不多。

2、html調用fancybox的地方

<a id='fancybox' href="test1.html" >click here</a>//<a>標簽里面加上一個class="fancybox.ajax"，不然js里面要加參數type來說明

不知道從哪個版本開始，調用ajax的時候必須在class里面加上fancybox.ajax這個，調用iframe呢要加上fancybox.iframe。不然調不出來。前提是調用fancybox沒有指定彈層類型的參數。指類型用type這個參數。

3、js調用fancybox

$("#fancybox").fancybox({  'width'        : '30%',  'height'        : '20%',  'autoScale'      : false,  'transitionIn'     : 'none',  'transitionOut'    : 'none',  'onClosed' : function() {alert('test');}});

fancybox彈層插件有一點也要注意，就是不管是用ajax彈層，還是iframe來加載頁面，彈出東西，要加上高和寬，如果不加的話，默認是自適應的。這樣就會有問題，如果CSS用了特殊字體，即使你設置了，width和height,不同的瀏覽器計算出來的彈層大小會不一樣。

更多關于jQuery插件相關內容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結》

希望本文所述對大家jQuery程序設計有所幫助。