Jquery插件之Fancybox丰富的弹出层效果附源码下载


Posted in Javascript onDecember 02, 2015

Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果。前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片、图片集、Ajax数据,还能加载SWF影片,iframe页面等等。

Jquery插件之Fancybox丰富的弹出层效果附源码下载

效果演示     源码下载

fancybox 特点:

可以支持图片、html 文本、flash 动画、iframe 以及 ajax 的支持;
可以自定义播放器的 css 样式;
可以以组的形式进行播放;
如果将鼠标滚动插件(mouse wheel plugin)包含进来的话 fancybox 还能支持鼠标滚轮滚动来翻阅图片;
fancybox 播放器支持投影,更有立体的感觉。

支持键盘方向键和ESC键。
丰富的参数设置和方法调用。
可扩展性强。

如何使用?

本文以DEMO中的Demo2为例,讲解fancybox的使用。

1、添加javascript引用和css文件的引用

<link rel="stylesheet" type="text/css" href="fancybox.css" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/fancybox.js"></script>

2、HTML

<h4>图片集,支持键盘方向键</h4> 
<p> 
 <a rel="group" href="images/b1.jpg" title="图片标题"><img alt="" src="images/s1.gif" /></a> 
 <a rel="group" href="images/b2.jpg" title="图片标题"><img alt="" src="images/s2.gif" /></a> 
 <a rel="group" href="images/b3.jpg" title="蓝天白云绿草"><img alt="" src="images/s3.gif" /></a> 
</p>

3、调用fancybox

$(function(){ 
 $("a[rel=group]").fancybox({ 
 'titlePosition' : 'over', 
 'cyclic' : true, 
 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { 
   return '<span id="fancybox-title-over">' + (currentIndex + 1) + 
 ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>'; 
  } 
 }); 
});

注意,fancybox的参数设置格式为:'key':'value'。titlePosition:设置图片标题的显示位置为图片上。cyclic:设置图片浏览方式为循环浏览。titleFormat:设置图片标题的格式,可以显示图片总数和当前图片顺序。

fancybox插件主要参数和方法一览表

参数/方法 描述 默认值
基本
width 设置弹出串口的宽度,当内容为swf,iframe或者单行文字时, 应该将'autoDimensions' 设置为false 560
height 设置弹出串口的高度,当内容为swf,iframe或者单行文字时, 应该将'autoDimensions' 设置为false 340
cyclic 是否循环显示,当内容为图片集时。 false
centerOnScroll 弹出窗口始终浏览器居中。 false
modal 是否使用模式窗口。当设置为true时,应该同时将:'hideOnOverlayClick','hideOnContentClick', 'enableEscapeButton', 'showCloseButton' 设置为false,并将'overlayShow' 设置为true false
titlePosition 标题的位置,可以设置为'outside', 'inside' or 'over' 'outside'
transitionIn, transitionOut 窗口显示的方式,可以设置为'elastic', 'fade' or 'none' 'fade'
send 方法,向服务端发送裁剪图片的数据,以便服务端接收参数进行处理, e.g: cropzoom.send('process.php','POST',{id=1},function(r){ alert(r); });  
方法
$.fancybox.showActivity 显示加载动画  
$.fancybox.hideActivity 隐藏加载动画  
$.fancybox.close 关闭窗口  
$.fancybox.resize 自动调整窗口的高度使之与内容相适应  
Centered 是否将选区居中,即显示在容器的中心。

以上内容是关于Jquery插件之Fancybox丰富的弹出层效果附源码下载的全部叙述,希望大家喜欢。

Javascript 相关文章推荐
javascript 快速排序函数代码
May 30 Javascript
jquery div 居中技巧应用介绍
Nov 24 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
老生常谈JavaScript数组的用法
Jun 10 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
纯js代码实现简单计算器
Dec 02 #Javascript
jquery判断输入密码两次是否相等
Apr 22 #Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 #Javascript
Jqgrid之强大的表格插件应用
Dec 02 #Javascript
整理Javascript事件响应学习笔记
Dec 02 #Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 #Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 #Javascript
You might like
php抓取https的内容的代码
2010/04/06 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
python实现的自动发送消息功能详解
2019/08/15 Python
python hash每次调用结果不同的原因
2019/11/21 Python
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
市场营销专业毕业生自荐信
2013/11/02 职场文书
党员的自我评价范文
2014/01/02 职场文书
部队领导证婚词
2014/01/12 职场文书
小班重阳节活动方案
2014/02/08 职场文书
公开服务承诺制度
2014/03/26 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
公司禁烟通知
2015/04/23 职场文书
学校党员干部承诺书
2015/05/04 职场文书
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android