码迷,mamicode.com
首页 > 其他好文 > 详细

fancebox 图片蒙版的使用

时间:2015-06-08 01:02:30      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:

进入官网http://fancybox.net/
技术分享
下载文件包
技术分享
把lib 里面的文件技术分享放入js 中
然后把source 文件全部复制到js中然后引入
技术分享
最后然后引入j.js为jquery
http://fancyapps.com/fancybox/#license  此网站里面有案例可以根据步骤去做,也可以去看下载的demo 
  1. <script src="js/j.js"></script>
  2. <script type="text/javascript" src="js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
  3. <!-- Add fancyBox -->
  4. <link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
  5. <script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js"></script>
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $(".apcon .bd ul li a").fancybox();
  4. });
  5. </script>
也可以根据demo加入动画
  1. $(".apcon .bd ul li a").fancybox({
  2. wrapCSS : ‘fancybox-custom‘,
  3. closeClick : true,
  4. openEffect : ‘elastic‘,
  5. helpers : {
  6. title : {
  7. type : ‘inside‘
  8. },
  9. overlay : {
  10. css : {
  11. ‘background‘ : ‘rgba(0,0,0,0.85)‘ //控制蒙版的颜色
  12. }
  13. }
  14. }
  15. });
  16. });

  1. <div class="apcon">
  2. <div class="hd">
  3. <ul></ul>
  4. </div>
  5. <div class="bd">
  6. <ul>
  7. <!--从数据库中查询出荣誉资质图片在此显示-->
  8. <?php
  9. $rs=query(‘hnsc_zz‘,‘url,ztitle‘,"flag=‘y‘",‘order by id desc‘,5);
  10. foreach($rs as $v){
  11. ?>
  12. <li><a href="upload/zz/<?=$v[0]?>" title="<?=$v[1]?>"><img src="upload/zz/s_<?=$v[0]?>"></a></li>
  13. <?php }?>
  14. </ul>
  15. </div>
  16. <a class="prev" href="javascript:void(0)"></a>
  17. <a class="next" href="javascript:void(0)"></a>
  18. </div>









fancebox 图片蒙版的使用

标签:

原文地址:http://www.cnblogs.com/lsr111/p/4559673.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!