baguetteBox.js - 弹出层效果纯Javascript创建的图像展示效果lightbox JS插件
  • 分享到微信朋友圈
    X
立即下载 查看演示

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

baguetteBox.js 优势

  • javascript完成，不需要jQuery库支持

  • 支持触屏手机端

  • 支持显示标题和说明等

  • 支持响应式效果

  • 支持CSS3过渡效果

  • 使用 SVG 按钮，没有多余的文件下载

  • 启用 gzip 压缩后仅 2KB

实现原理

主要使用了js的日期对象,首先要设置起始时间，实现的时候先创建一个日期对象，设置时间年月日小时分秒，然后将对象传参到正计时方法里面

主要js代码与说明

<script>
    baguetteBox.run('.baguetteBoxOne', {
        //动画方式
        animation: 'fadeIn',
        //阻止浏览器滚动条的出现
        noScrollbars: true,
        //显示图片说明
        captions: function (element) {
            return element.getElementsByTagName('img')[0].alt;
        }
    }); 
</script>

参数说明

  • captions 显示图片说明 true

  • buttons 显示按钮，可选 ‘auto’ / true / false auto

  • async 异步加载文件 false

  • preload 需要预加载图片的个数 2

  • animation 动画方式，可选 slideIn / fadeIn slideIn