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 去除Array中的null值示例代码
Nov 20 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
了解JavaScript中的选择器
May 24 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 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
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
js转换对象为xml
2017/02/17 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
Python struct模块解析
2014/06/12 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
python 初始化一个定长的数组实例
2019/12/02 Python
基于python实现操作redis及消息队列
2020/08/27 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
应届生会计电算化求职信
2013/10/03 职场文书
高中生毕业自我鉴定
2013/10/10 职场文书
求职简历中个人的自我评价
2013/12/01 职场文书
前台文员我鉴定
2014/01/12 职场文书
劳资协议书范本
2014/04/23 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android