在项目中遇到图片点击放大的效果，想到了FancyBox这个框架，之前用过功能还不错，推荐给大家

引入相关版本文件

<!-- 引入jQuery版本 -->
//upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.0.min.js

<!-- 添加FancyBox核心文件 -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.7"></script>

点击放大的html代码

<a class="fancybox-effects-a" href="5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="5_s.jpg" alt="" /></a>
<a class="fancybox-effects-b" href="5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="5_s.jpg" alt="" /></a>
<a class="fancybox-effects-c" href="5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="5_s.jpg" alt="" /></a>
<a class="fancybox-effects-d" href="5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="5_s.jpg" alt="" /></a>

以下是官方示例 js code

// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
    helpers: {
        title : {
            type : 'outside'
        },
        overlay : {
            speedOut : 0
        }
    }
});

// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
    openEffect  : 'none',
    closeEffect	: 'none',
    helpers : {
        title : {
            type : 'over'
        }
    }
});

// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
    wrapCSS    : 'fancybox-custom',
    closeClick : true,
    openEffect : 'none',
    helpers : {
        title : {
            type : 'inside'
        },
        overlay : {
            css : {
                'background' : 'rgba(238,238,238,0.85)'
            }
        }
    }
});

// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
    padding: 0,
    openEffect : 'elastic',
    openSpeed  : 150,
    closeEffect : 'elastic',
    closeSpeed  : 150,
    closeClick : true,
    helpers : {
        overlay : null
    }
});

我本地的具体效果查看：点击查看

fancybox-2.1.7下载链接：https://pan.baidu.com/s/1_DNEKrklDS6_y_P_UI3bpA  提取码: 7u46

其他效果和文件可到官网查看下载：

网址1：http://fancyapps.com/fancybox/

网址2：http://fancybox.net/