jQuery弹层插件jquery.fancybox.js用法实例

jQuery弹层插件jquery.fancybox.js用法实例_jquery

php中文网

发布： 2016-05-16 15:18:50

原创

2393人浏览过

本文实例讲述了jquery弹层插件jquery.fancybox.js用法。分享给大家供大家参考，具体如下：

fancybox是jquery的插件，功能强大。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，除了能展示层外，还可以展示iframed内容，通过css订制样式。配合其他插件，能实现更旋的效果。

这里给出官方下载以及实例地址：http://fancyapps.com/fancybox/

附带给出本站下载地址。

到目前为止，fancybox的最新版本2.1.5，调用方法变了一些，参数也加了一些。在上面那个地址的最下面，有非常详细的参数说明。下面简单说一下使用过程。

1、要用fancybox，至少要加载二个文件

<script type="text/javascript" src="jquery.fancybox.js&#63;v=2.1.2"></script>
<link rel="stylesheet" type="text/css" href="jquery.fancybox.css&#63;v=2.1.2" media="screen" />

登录后复制

在这儿有一点让我不爽，就是要加载css文件，jquery插件当中要加载css文件的并不多。

2、html调用fancybox的地方

绘蛙AI视频

绘蛙推出的AI模特视频生成工具

127

查看详情

<a id='fancybox' href="test1.html" >click here</a>
//<a>标签里面加上一个class="fancybox.ajax"，不然js里面要加参数type来说明

登录后复制

不知道从哪个版本开始，调用ajax的时候必须在class里面加上fancybox.ajax这个，调用iframe呢要加上fancybox.iframe。不然调不出来。前提是调用fancybox没有指定弹层类型的参数。指类型用type这个参数。

3、js调用fancybox

$("#fancybox").fancybox({
  'width'        : '30%',
  'height'        : '20%',
  'autoScale'      : false,
  'transitionIn'     : 'none',
  'transitionOut'    : 'none',
  'onClosed' : function() {alert('test');}
});

登录后复制

fancybox弹层插件有一点也要注意，就是不管是用ajax弹层，还是iframe来加载页面，弹出东西，要加上高和宽，如果不加的话，默认是自适应的。这样就会有问题，如果CSS用了特殊字体，即使你设置了，width和height,不同的浏览器计算出来的弹层大小会不一样。

更多关于jQuery插件相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。