首页 > 代码库 > 很实用的baguetteBox.js 图片弹出层

很实用的baguetteBox.js 图片弹出层

2024-08-12 05:52:03   218人阅读

lightbox JS插件--baguetteBox.js，它是用纯Javascript创建的图像展示效果，拥有图像放大缩小并带有相应的CSS3过度，并能在触摸屏等设备上完美展示。

baguetteBox.js 优势
javascript完成，不需要jQuery库支持
支持触屏手机端
支持显示标题和说明等
支持响应式效果
支持CSS3过渡效果
使用 SVG 按钮，没有多余的文件下载
启用 gzip 压缩后仅 2KB

在线实例

默认淡入淡出响应式图片

使用方法

<div class="header large">  <ul class="nav">     <li><a class="cur" href="http://www.mamicode.com/#" title="首页">首页</a></li>     <li><a href="http://www.mamicode.com/#" title="模板">网站模板</a></li>     <li><a href="http://www.mamicode.com/#" title="网页特效">网页特效</a></li>     <li><a href="http://www.mamicode.com/#" title="网站psd">网站psd</a></li>  </ul> </div>

　　

复制

我们在页面上放置多个可点击的缩略图，并且在a标签上加上图片链接href属性和data-caption标题

<div class="baguetteBox">     <a href="http://www.mamicode.com/img/1-1.jpg" data-caption="Golden Gate Bridge"><img src="http://www.mamicode.com/img/thumbs/1-1.jpg"></a>     <a href="http://www.mamicode.com/img/1-2.jpg" title="Midnight City"><img src="http://www.mamicode.com/img/thumbs/1-2.jpg"></a>    ...... </div>
$(function(){     baguetteBox.run(‘.baguetteBox‘, {         //options     }); });

参数详解

参数描述默认值
captions显示图片说明true
buttons显示按钮，可选 ‘auto’ / true / falseauto
async异步加载文件false
preload需要预加载图片的个数2
animation动画方式，可选 slideIn / fadeInslideIn
下载

 

很实用的baguetteBox.js 图片弹出层


联系
我们