带有源代码下载的Jquery插件的Fancybox丰富的弹出层效果

Fancybox是一个优秀的jquery插件，可以显示丰富的弹出层效果。在前一篇文章中，我们介绍了facybox的弹出层效果。与facybox相比，fancybox的功能更加完备。它不仅可以加载DIV、图片、照片集和Ajax数据，还可以加载SWF电影、iframe页面等。

下载效果演示源代码。

Fancybox功能：

它可以支持图片、html文本、flash动画、iframe和ajax。可以自定义播放器的css样式；可以分组播放；如果包含鼠标滚轮插件，fancybox还可以支持鼠标滚轮滚动图片；盒子播放器支持投影，更有立体感。

支持键盘箭头键和ESC键。丰富的参数设置和方法调用。并且具有很强的可扩展性。

怎么用？

本文以DEMO中的DEMO2为例说明fancybox的使用。

1.添加javascript引用和css文件引用。

link rel='样式表'类型=' text/CSS ' href=' fancy box . CSS '/脚本类型=' text/JavaScript ' src=' http : js/jquery . js '/脚本脚本类型=' text/JavaScript ' src=' http : js/fancy box . js '/脚本2、HTML

H4图片集，键盘方向键/h4p a rel=' group ' href=' images/B1 . jpg ' title=' picture title ' img alt=' src=' http 3360 images/s 1 . gif '/a a rel=' group ' href=' images/B2 . jpg ' title=' picture title ' img alt=' src=' http : images/s 2 . gif '/a rel=' group ' href=' images/B3 . jpg ' title='

$(function(){ $('a[rel=group]')。fancy box({ ' title position ' : ' over '，' cyclic' : true，' titleFormat' :函数(title，currentArray，CurrentDex，CurrentToTs){ return ' span id=' fancy box-title-over ' '(CurrentDex 1)'/' CurrentRay . length(title . length？' ' title : ' ')'/span '；} });});请注意，fancybox的参数设置格式为：“key”:“value”。TitlePosition:设置图片标题在图片上的显示位置。循环：将图片浏览模式设置为循环浏览。TitleFormat:设置图片标题的格式，可以显示图片总数和当前图片顺序。

box插件主要参数和方法列表。

参数/方法描述默认值基本宽度设置弹出串行端口的宽度。当内容为swf、iframe或单行文本时，“autoDimensions”应设置为false 560 height以设置弹出串口的高度。当内容为swf、iframe或单行文本时，“autoDimensions”应设置为false 340循环显示。True false居中所有弹出式窗口在浏览器中总是居中。是否模态使用假模态窗口。当设置为true时，您还应该将“hideOnOverlayClick”、“hideOnContentClick”、“enableEscapeButton”、“showCloseButton”设置为false。并将“重叠显示”设置为真假标题位置的位置，可以设置为“外侧”、“内侧”或“上方”、“外侧”过渡入和过渡出窗口显示模式，或“弹性”。' fade '或' none' 'fade' send方法将裁剪图片的数据发送给服务器，这样服务器就可以接收参数进行处理，例如g : cropzoom . send(' process . PHP '，' post '，{id=1}，function(r){ alert(r)；});方法$ . fancy box . Show activity Show loading animation $ . fancy box . Hide activity Hide loading animation $ . fancy box . Close Close the window $ . fancy box . resize自动调整窗口的高度以适合内容Centered是否将所选内容居中，即将其显示在容器的中心。以上内容是对Fancybox丰富的Jquery插件弹出层效果的完整记述，附带源代码下载。希望你喜欢。