fancebox 图片蒙版的使用

Posted on   小蕊同学  阅读(304)  评论(0编辑  收藏  举报
进入官网http://fancybox.net/

下载文件包

把lib 里面的文件放入js 中
然后把source 文件全部复制到js中然后引入

最后然后引入j.js为jquery
http://fancyapps.com/fancybox/#license  此网站里面有案例可以根据步骤去做,也可以去看下载的demo 
<script src="js/j.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>









随笔 - 197, 文章 - 0, 评论 - 0, 阅读 - 67898

Copyright © 2025 小蕊同学
Powered by .NET 9.0 on Kubernetes

点击右上角即可分享
微信分享提示