fancebox 图片蒙版的使用 - 小蕊同学

进入官网http://fancybox.net/

下载文件包

把lib 里面的文件放入js 中

然后把source 文件全部复制到js中然后引入

最后然后引入j.js为jquery

http://fancyapps.com/fancybox/#license  此网站里面有案例可以根据步骤去做，也可以去看下载的demo 

<script src="js/j.js"></script>

<script type="text/javascript" src="js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>


<!-- Add fancyBox -->
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$(".apcon .bd ul li a").fancybox();
	});
</script>

也可以根据demo加入动画

$(".apcon .bd ul li a").fancybox({
		wrapCSS    : \'fancybox-custom\',
				closeClick : true,

				openEffect : \'elastic\',

				helpers : {
					title : {
						type : \'inside\'
					},
					overlay : {
						css : {
							\'background\' : \'rgba(0,0,0,0.85)\' //控制蒙版的颜色
						}
					}
				}
		
		});
});

   <div class="apcon">
        <div class="hd">
        <ul></ul>
        </div>
        <div class="bd">
        <ul>
        <!--从数据库中查询出荣誉资质图片在此显示-->
        <?php
        	$rs=query(\'hnsc_zz\',\'url,ztitle\',"flag=\'y\'",\'order by id desc\',5);
			foreach($rs as $v){
					?>
				<li><a href="upload/zz/<?=$v[0]?>" title="<?=$v[1]?>"><img src="upload/zz/s_<?=$v[0]?>"></a></li>
				<?php }?>
                </ul>
                </div>
            <a class="prev" href="javascript:void(0)"></a>
			<a class="next" href="javascript:void(0)"></a>
        </div>

来自为知笔记(Wiz)