支持移动设备的图片弹出层-baguetteBox.js-特效详细页-国内领先的前端外包切图网站-切客网(qkhtml.com)

在线下单

淘宝网拍付下单(拍付下单之后请及时联系客服排单)

店铺地址 https://sminer.taobao.com/

拍付链接 http://t.cn/R34uWQU

支持移动设备的图片弹出层-baguetteBox.js

分类:弹出层 更新时间:2018-01-24 浏览次数:1728

代码简介

baguetteBox.js是一款支持移动设备的响应式lightbox插件。 baguetteBox.js有纯javascript编写,支持响应式图片和CSS3动画过渡效果,支持移动手机,压缩后的版本仅2.7K。baguetteBox.js插件的特点还有: 1. 同一个页面支持多个lightbox实例,互不影响。2. 支持移动触摸设备。 3. 支持全屏模式。 4. 支持显示图片标题。 5. 支持响应式图片。 6. 支持CSS3过渡动画。 7. 按钮使用SVG,不需要额外的图片。 8. 压缩后的版本仅2.7K。

浏览器兼容

Chrome、Firefox 、Opera、 Safari、IE8+

使用方法

1. 引入文件:

<linkrel="stylesheet"href="path/to/baguetteBox.css">
<scriptsrc="path/to/baguetteBox.js"></script> 


2. html 结构:

<divclass="gallery">
    <ahref="img/2-1.jpg"data-caption="Image caption">
        <imgsrc="img/thumbs/2-1.jpg"alt="First image">
    </a>
    <ahref="img/2-2.jpg">
        <imgsrc="img/thumbs/2-2.jpg"alt="Second image">
    </a>
</div>
      

3. 代码初始化:

   baguetteBox.run('.gallery');


问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

您的问题已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!

发票受理

提交成功

您的发票受理请求已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!