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中with()方法的语法格式及使用
Aug 04 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
详解Vue底部导航栏组件
May 02 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 Javascript
聊聊JS ES6中的解构
Apr 29 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 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
window.ActiveXObject使用说明
2010/11/08 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
Python中tell()方法的使用详解
2015/05/24 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
pytorch数据预处理错误的解决
2020/02/20 Python
详解Python设计模式之策略模式
2020/06/15 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
小车司机岗位职责
2013/11/25 职场文书
行政总经理岗位职责
2013/12/05 职场文书
年终考核评语
2014/01/19 职场文书
团队激励口号
2014/06/06 职场文书
2015年电工工作总结
2015/04/10 职场文书
国庆阅兵观后感
2015/06/15 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
教师个人教学反思
2016/02/23 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android