Fancybox中怎么實現(xiàn)彈出層效果

Fancybox中怎么實現(xiàn)彈出層效果，針對這個問題，這篇文章詳細介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

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

<h5>圖片集，支持鍵盤方向鍵</h5> <p>   <a rel="group" href="images/b1.jpg" title="圖片標題"><img alt="" src="images/s1.gif" /></a>   <a rel="group" href="images/b2.jpg" title="圖片標題"><img alt="" src="images/s2.gif" /></a>   <a rel="group" href="images/b3.jpg" title="藍天白云綠草"><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è)置圖片標題的顯示位置為圖片上。cyclic：設(shè)置圖片瀏覽方式為循環(huán)瀏覽。titleFormat：設(shè)置圖片標題的格式，可以顯示圖片總數(shù)和當(dāng)前圖片順序。

fancybox插件主要參數(shù)和方法一覽表

參數(shù)/方法            描述            默認值        基本        width            設(shè)置彈出串口的寬度，當(dāng)內(nèi)容為swf,iframe或者單行文字時，            應(yīng)該將'autoDimensions' 設(shè)置為false            560        height            設(shè)置彈出串口的高度，當(dāng)內(nèi)容為swf,iframe或者單行文字時，            應(yīng)該將'autoDimensions' 設(shè)置為false            340        cyclic            是否循環(huán)顯示，當(dāng)內(nèi)容為圖片集時。            false        centerOnScroll            彈出窗口始終瀏覽器居中。            false        modal            是否使用模式窗口。當(dāng)設(shè)置為true時，應(yīng)該同時將：'hideOnOverlayClick'，'hideOnContentClick'，'enableEscapeButton'，            'showCloseButton' 設(shè)置為false，并將'overlayShow' 設(shè)置為true            false        titlePosition            標題的位置,可以設(shè)置為'outside', 'inside' or 'over'            'outside'        transitionIn, transitionOut            窗口顯示的方式，可以設(shè)置為'elastic', 'fade' or 'none'            'fade'        send            方法，向服務(wù)端發(fā)送裁剪圖片的數(shù)據(jù)，以便服務(wù)端接收參數(shù)進行處理，            e.g: cropzoom.send('process.php','POST',{id=1},function(r){ alert(r); });                     方法        $.fancybox.showActivity            顯示加載動畫                     $.fancybox.hideActivity            隱藏加載動畫                     $.fancybox.close            關(guān)閉窗口                     $.fancybox.resize            自動調(diào)整窗口的高度使之與內(nèi)容相適應(yīng)                     Centered            是否將選區(qū)居中，即顯示在容器的中心。             

關(guān)于Fancybox中怎么實現(xiàn)彈出層效果問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。