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获取url参数的使用扩展实例
Dec 29 Javascript
JSQL 批量图片切换的实现代码
May 05 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
原生JavaScript实现五子棋游戏
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 sprintf()函数让你的sql操作更安全
2008/07/23 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
PyQt5每天必学之布局管理
2018/04/19 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
python常用函数与用法示例
2019/07/02 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
一封普通求职者的求职信
2013/11/20 职场文书
生产现场工艺工程师岗位职责
2013/11/28 职场文书
大学活动总结格式
2014/04/29 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
装配出错检讨书
2014/09/23 职场文书
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫
JS class语法糖的深入剖析
2022/07/07 Javascript