jQuery彈層插件jquery.fancybox.js用法實例
本文實例講述了jQuery彈層插件jquery.fancybox.js用法。分享給大家供大家參考，具體如下：
fancybox是jquery的插件，功能強大。支持對放大的圖片添加陰影效果，對于一組相關的圖片添加導航操作按紐，除了能展示層外，還可以展示iframed內容， 通過css訂制樣式。配合其他插件，能實現(xiàn)更旋的效果。
這里給出官方下載以及實例地址：http://fancyapps.com/fancybox/
附帶給出本站下載地址。
到目前為止，fancybox的最新版本2.1.5，調用方法變了一些，參數(shù)也加了一些。在上面那個地址的最下面，有非常詳細的參數(shù)說明。下面簡單說一下使用過程。
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里面要加參數(shù)type來說明
不知道從哪個版本開始，調用ajax的時候必須在class里面加上fancybox.ajax這個，調用iframe呢要加上fancybox.iframe。不然調不出來。前提是調用fancybox沒有指定彈層類型的參數(shù)。指類型用type這個參數(shù)。
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程序設計有所幫助。
相關文章
這篇文章主要介紹了jQuery中:contains選擇器用法,以實例形式分析了:contains選擇器的功能、定義及匹配給定元素文本時的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12
jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁面及原理
很多App中,新聞或者展示類都存在下拉刷新和上拉加載的效果，如何實現(xiàn)上拉刷新下拉加載更多頁面的呢？下面小編通過下面內容給大家介紹jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁面及原理，需要的朋友可以參考下2015-08-08
Jquery其實本身可以操作select表單，但是由于比較反鎖，沒有.net 控件那樣去操作方便，我在網(wǎng)上Google了一會，發(fā)現(xiàn)了一個不錯的專門操作select的插件，很好，使用過了，感覺蠻不錯的。2009-11-11
這篇文章主要介紹了jQuery實現(xiàn)的圖片輪播效果,結合完整實例形式分析了jQuery結合時間函數(shù)動態(tài)改變頁面元素樣式的相關技巧,需要的朋友可以參考下2016-09-09
修改jquery.lazyload.js實現(xiàn)頁面延遲載入
jquery.lazyload.js并未真正的實現(xiàn)頁面延遲載入，它的實現(xiàn)原理是頁面載入完畢后將html中所有img標簽的src屬性都替換為空，把src的初始值存儲到一個自定義的屬性中，當頁面滾動到img標簽位置時再將圖片載入進來。2010-12-12
這篇文章主要介紹了jQuery實現(xiàn)的中英文切換功能,結合實例形式分析了jQuery結合插件translate.js實現(xiàn)中英文翻譯的相關操作技巧,需要的朋友可以參考下2019-01-01
slides是一款強大的，專業(yè)的幻燈片組件，能夠全方位對幻燈片的速度控制，本文通過代碼實例給大家講解jquery.slides.js，感興趣的朋友一起學習2015-11-11
很多新手朋友們都不知道jquery 中的each()怎么跳出循環(huán)，在each的回調函數(shù)中使用return false2014-05-05
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)HTML元素隱藏和顯示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了JQuery中節(jié)點遍歷方法,實例分析了jQuery遍歷節(jié)點的技巧,需要的朋友可以參考下2015-05-05