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


Posted in Javascript onJanuary 22, 2016

本文实例讲述了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?v=2.1.2"></script>
<link rel="stylesheet" type="text/css" href="jquery.fancybox.css?v=2.1.2" media="screen" />

在这儿有一点让我不爽,就是要加载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程序设计有所帮助。

Javascript 相关文章推荐
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 #Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 #Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 #Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 #Javascript
jQuery解析json格式数据简单实例
Jan 22 #Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 #Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 #Javascript
You might like
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
当json键为数字时的取值方法解析
2013/11/15 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
幼儿师范毕业生自荐信
2013/11/09 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫