欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Jquery插件之Fancybox豐富的彈出層效果附源碼下載

 更新時(shí)間:2015年12月02日 11:15:33   投稿:mrr  
Fancybox是一款優(yōu)秀的jquery插件,它能夠展示豐富的彈出層效果,相比f(wàn)acybox,fancybox顯得功能更為齊全,它除了可以加載DIV,圖片、圖片集、Ajax數(shù)據(jù),還能加載SWF影片,iframe頁(yè)面等等

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)文章

最新評(píng)論