jquery.fancybox.js点击弹出大图效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍如何使用 jquery.fancybox插件制作图片展示功能，Fancybox是一款基于jQuery的强大插件，它为网页中的图片浏览提供了优雅的解决方案。这个插件的设计理念类似于Lightbox，但添加了更多实用功能。

优点

  • 可以显示图像、HTML 元素、SWF 电影、Iframe 以及 Ajax 请求

  • 可通过设置和 CSS 进行自定义

  • 对相关项目进行分组并添加导航。

  • 如果页面中包含鼠标滚轮插件，那么 FancyBox 也会响应鼠标滚轮事件

  • 使用缓动插件支持花哨的过渡

  • 在缩放项目下添加漂亮的阴影

使用方法

引入JQuery和fancybox库‌：

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

HTML结构

<div class="img">
    <a href="images/1.jpg" title="图片1">
        <img src="images/1.jpg" />
    </a>
</div>

初始化与说明

<script type="text/javascript">
    $(document).ready(function () {

        /* 基础默认设置 */

        $(".img a").fancybox();

        /* 添加属性 */

        $(".img a").fancybox({
            padding: 0
        });

        /* 多属性添加 */

        $(".img a").fancybox({
            padding: 0,
            prevEffect: 'none',
            nextEffect: 'none'
        });

    });
</script>