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 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
简单分析js中的this的原理
Aug 31 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 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中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
Python中进程和线程的区别详解
2017/10/29 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
pycham查看程序执行的时间方法
2018/11/29 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
python实现斗地主分牌洗牌
2020/06/22 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
政风行风建设整改方案
2014/10/27 职场文书
校园安全教育心得体会
2016/01/15 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
SQL写法--行行比较
2021/08/23 SQL Server