铁雪资源网 Design By www.gsvan.com

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

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

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

附带给出本站下载地址。

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

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

<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.fancybox.js">

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

2、html调用fancybox的地方

<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程序设计有所帮助。

标签:
jQuery,弹层,插件,jquery.fancybox.js

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“jQuery弹层插件jquery.fancybox.js用法实例”

暂无jQuery弹层插件jquery.fancybox.js用法实例的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?