fancybox是一款优秀的jquery插件，它能够展示丰富的弹出层效果。前面我们有文章介绍了facyBox弹出层效果，相比facyBox，fancybox显得功能更为齐全，它除了可以加载DIV，图片、图片集、Ajax数据，还能加载SWF影片，iframe页面等等。

fancybox 特点：

可以支持图片、html 文本、flash 动画、iframe 以及 ajax 的支持；可以自定义播放器的 css 样式；可以以组的形式进行播放；如果将鼠标滚动插件（mouse wheel plugin）包含进来的话 fancybox 还能支持鼠标滚轮滚动来翻阅图片； fancybox 播放器支持投影，更有立体的感觉。

支持键盘方向键和ESC键。丰富的参数设置和方法调用。可扩展性强。

如何使用？

本文以DEMO中的Demo2为例，讲解fancybox的使用。

1、添加javascript引用和css文件的引用

2、HTML

图片集，支持键盘方向键

3、调用 fancybox

fancybox({ 'titlePosition' : 'over','cyclic' : true,'titleFormat' : function(title,currentArray,currentIndex,currentOpts) { return 'fancybox-title-over">' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + ''; } }); });

注意，fancybox的参数设置格式为：'key':'value'。titlePosition:设置图片标题的显示位置为图片上。cyclic：设置图片浏览方式为循环浏览。titleFormat：设置图片标题的格式，可以显示图片总数和当前图片顺序。

fancybox 插件主要参数和方法一览表

方法内容为swf,iframe或者单行文字时，
应该将'autoDimensions' 设置为false内容为swf,211) 1px solid; padding-top: 2px">340显示，当内容为图片集时。 'enableEscapeButton'， 'showCloseButton' 设置为false，并将'overlayShow' 设置为true标题的位置,可以设置为'outside','inside' or 'over'显示的方式，可以设置为'elastic','fade' or 'none'方法，向服务端发送裁剪图片的数据，以便服务端接收参数进行处理，
e.g: cropzoom.send('process.PHP','POST',{id=1},function(r){ alert(r); });方法fancybox.showActivity显示加载动画fancybox.hideActivityfancybox.close关闭窗口fancybox.resize自动调整窗口的高度使之与内容相适应显示在容器的中心。

以上内容是关于Jquery插件之fancybox丰富的弹出层效果附源码下载的全部叙述，希望大家喜欢。

原文链接：https://www.f2er.com/jquery/51338.html

fancybox弹出层 jquery_fancybox弹出