Java基础、中级、高级、架构面试资料
    你的位置：业余草 > HTML5 > jQuery 弹出框插件 fancyBox 使用教程

    jQuery 弹出框插件 fancyBox 使用教程

    HTML5 herman 5105浏览 0评论
    公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
    本博客日IP超过2000，PV 3000 左右，急需赞助商。
    极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
    受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
    所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
    视频教程免费领
    腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

    今天为大家推荐一款强大的弹出框插件：fancyBox插件。fancyBox官方地址：http://fancybox.net/

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

    Fancybox 弹出层效果

    Fancybox 弹出层效果

    fancybox 具有的特性

    1. 允许我们用鼠标和键盘上的四个方向键切换图片
    2. 可以根据当前窗口大小自动调整弹出框的大小，当我们改变浏览器窗口大小时，将会看到弹出框自动缩放了
    3. 支持缩略图和按钮帮助导航
    4. 弹出框支持显示多种类型的内容（图片，html，视频……）
    5. 可以加载DIV、图片、图片集、Ajax数据、SWF影片，iframe页面等。
    6. 支持键盘方向键和ESC键。
    7. 丰富的参数设置和方法调用。
    8. 可扩展性强。

    关于fancybox 下载地址，大家可以到官网上下载。http://fancybox.net/FancyBox

    FancyBox 使用教程

    首先要引入js和css类库。添加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>

    编写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>

    编写js代码，调用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 实例运行效果

    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 是否将选区居中，即显示在容器的中心。  

    更多参数和方法请参照http://fancybox.net/api。

    业余草公众号

    最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

    本文原文出处：业余草： » jQuery 弹出框插件 fancyBox 使用教程

    相关文章推荐