首页 > 代码库 > 很实用的baguetteBox.js 图片弹出层
很实用的baguetteBox.js 图片弹出层
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 / false | auto |
async | 异步加载文件 | false |
preload | 需要预加载图片的个数 | 2 |
animation | 动画方式,可选 slideIn / fadeIn | slideIn |
下载
很实用的baguetteBox.js 图片弹出层
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。