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实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
vue实现按钮切换图片
Jan 20 Vue.js
Javascript实现关闭广告效果
Jan 29 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
php 无限极分类
2008/03/27 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
PHP引用的调用方法分析
2016/04/25 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
斜45度寻路实现函数
2009/08/20 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
python的dict,set,list,tuple应用详解
2014/07/24 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
单身旅行者的单身假期:Just You
2018/04/08 全球购物
2014年教师德育工作总结
2014/11/10 职场文书
人口与计划生育责任书
2015/05/09 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python
win10清理dns缓存
2022/04/19 数码科技