首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

jquery 弹出层插件,图片点击放大插件推荐FancyBox

Sonder
2020-06-27
2602字
7分钟
浏览 (3.2k)

引入相关版本文件

复制代码
<!-- 引入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
   }
});

具体效果查看: https://www.baiyongj.com/event/fancybox-2.1.7/index.html

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

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

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

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

转载于:http://www.baiyongj.com/news/472.html

下一篇 / 拒绝JavaScript,这三个CSS技巧你一定用的上​

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)