Jquery插件之Fancybox豐富的彈出層效果附源碼下載
Fancybox是一款優(yōu)秀的jquery插件,它能夠展示豐富的彈出層效果。前面我們有文章介紹了facybox彈出層效果,相比f(wàn)acybox,fancybox顯得功能更為齊全,它除了可以加載DIV,圖片、圖片集、Ajax數(shù)據(jù),還能加載SWF影片,iframe頁(yè)面等等。
fancybox 特點(diǎn):
可以支持圖片、html 文本、flash 動(dòng)畫、iframe 以及 ajax 的支持;
可以自定義播放器的 css 樣式;
可以以組的形式進(jìn)行播放;
如果將鼠標(biāo)滾動(dòng)插件(mouse wheel plugin)包含進(jìn)來(lái)的話 fancybox 還能支持鼠標(biāo)滾輪滾動(dòng)來(lái)翻閱圖片;
fancybox 播放器支持投影,更有立體的感覺(jué)。
支持鍵盤方向鍵和ESC鍵。
豐富的參數(shù)設(shè)置和方法調(diào)用。
可擴(kuò)展性強(qiáng)。
如何使用?
本文以DEMO中的Demo2為例,講解fancybox的使用。
1、添加javascript引用和css文件的引用
<link rel="stylesheet" type="text/css" href="fancybox.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/fancybox.js"></script>
2、HTML
<h4>圖片集,支持鍵盤方向鍵</h4> <p> <a rel="group" href="images/b1.jpg" title="圖片標(biāo)題"><img alt="" src="images/s1.gif" /></a> <a rel="group" href="images/b2.jpg" title="圖片標(biāo)題"><img alt="" src="images/s2.gif" /></a> <a rel="group" href="images/b3.jpg" title="藍(lán)天白云綠草"><img alt="" src="images/s3.gif" /></a> </p>
3、調(diào)用fancybox
$(function(){ $("a[rel=group]").fancybox({ 'titlePosition' : 'over', 'cyclic' : true, 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { return '<span id="fancybox-title-over">' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>'; } }); });
注意,fancybox的參數(shù)設(shè)置格式為:'key':'value'。titlePosition:設(shè)置圖片標(biāo)題的顯示位置為圖片上。cyclic:設(shè)置圖片瀏覽方式為循環(huán)瀏覽。titleFormat:設(shè)置圖片標(biāo)題的格式,可以顯示圖片總數(shù)和當(dāng)前圖片順序。
fancybox插件主要參數(shù)和方法一覽表
參數(shù)/方法 | 描述 | 默認(rèn)值 |
基本 | ||
width | 設(shè)置彈出串口的寬度,當(dāng)內(nèi)容為swf,iframe或者單行文字時(shí), 應(yīng)該將'autoDimensions' 設(shè)置為false |
560 |
height | 設(shè)置彈出串口的高度,當(dāng)內(nèi)容為swf,iframe或者單行文字時(shí), 應(yīng)該將'autoDimensions' 設(shè)置為false |
340 |
cyclic | 是否循環(huán)顯示,當(dāng)內(nèi)容為圖片集時(shí)。 | false |
centerOnScroll | 彈出窗口始終瀏覽器居中。 | false |
modal | 是否使用模式窗口。當(dāng)設(shè)置為true時(shí),應(yīng)該同時(shí)將:'hideOnOverlayClick','hideOnContentClick', 'enableEscapeButton', 'showCloseButton' 設(shè)置為false,并將'overlayShow' 設(shè)置為true |
false |
titlePosition | 標(biāo)題的位置,可以設(shè)置為'outside', 'inside' or 'over' | 'outside' |
transitionIn, transitionOut | 窗口顯示的方式,可以設(shè)置為'elastic', 'fade' or 'none' | 'fade' |
send | 方法,向服務(wù)端發(fā)送裁剪圖片的數(shù)據(jù),以便服務(wù)端接收參數(shù)進(jìn)行處理, e.g: cropzoom.send('process.php','POST',{id=1},function(r){ alert(r); }); |
|
方法 | ||
$.fancybox.showActivity | 顯示加載動(dòng)畫 | |
$.fancybox.hideActivity | 隱藏加載動(dòng)畫 | |
$.fancybox.close | 關(guān)閉窗口 | |
$.fancybox.resize | 自動(dòng)調(diào)整窗口的高度使之與內(nèi)容相適應(yīng) | |
Centered | 是否將選區(qū)居中,即顯示在容器的中心。 |
以上內(nèi)容是關(guān)于Jquery插件之Fancybox豐富的彈出層效果附源碼下載的全部敘述,希望大家喜歡。
相關(guān)文章
jQuery插件MovingBoxes實(shí)現(xiàn)左右滑動(dòng)中間放大圖片效果
本篇文章主要介紹jQuery中MovingBoxes左右滑動(dòng)放大圖片插件示例,實(shí)現(xiàn)左右滑動(dòng)和放大效果,有興趣的可以了解一下。2017-02-02jQuery實(shí)現(xiàn)可兼容IE6的滾動(dòng)監(jiān)聽功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)可兼容IE6的滾動(dòng)監(jiān)聽功能,結(jié)合實(shí)例形式分析了jQuery針對(duì)不同瀏覽器的事件監(jiān)聽、響應(yīng)及頁(yè)面屬性動(dòng)態(tài)變換相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-09-09使用jQuery Ajax功能時(shí)需要注意的一個(gè)問(wèn)題(內(nèi)存溢出)
最近發(fā)現(xiàn)jQuery越來(lái)越火,用它的人也越來(lái)越多。jQuery最強(qiáng)大的亮點(diǎn)莫過(guò)于它的CSS3 selector和極其簡(jiǎn)單的Ajax請(qǐng)求調(diào)用2012-05-05jQuery實(shí)現(xiàn)可兼容IE6的淡入淡出效果告警提示功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)可兼容IE6的淡入淡出效果告警提示功能,結(jié)合具體實(shí)例形式分析了jQuery彈出警告提示功能的具體實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-09-09Zero Clipboard實(shí)現(xiàn)瀏覽器復(fù)制到剪貼板的方法(多個(gè)復(fù)制按鈕)
這篇文章主要介紹了Zero Clipboard實(shí)現(xiàn)瀏覽器復(fù)制到剪貼板的方法,帶有多個(gè)復(fù)制按鈕效果,涉及jQuery插件ZeroClipboard.js具體使用步驟與相關(guān)技巧,需要的朋友可以參考下2016-03-03DIV+CSS+jQ實(shí)現(xiàn)省市聯(lián)動(dòng)可擴(kuò)展
這篇文章主要介紹了DIV+CSS+jQ實(shí)現(xiàn)省市聯(lián)動(dòng)可擴(kuò)展方法的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06JQuery中對(duì)服務(wù)器控件 DropdownList, RadioButtonList, CheckboxList的操作
JQuery中對(duì)服務(wù)器控件 DropdownList, RadioButtonList, CheckboxList的操作總結(jié),需要的朋友可以參考下。2011-06-06jQuery將表單序列化成一個(gè)Object對(duì)象的實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery將表單序列化成一個(gè)Object對(duì)象的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11jquery關(guān)于表格及表格列隱藏和顯示問(wèn)題探討
本文為大家詳細(xì)介紹下關(guān)于指定表格及指定列的隱藏或顯示、獲取表格的列數(shù)等等表格相關(guān)的使用技巧,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-06-06