xf-PictureBlackbox.js是一套由小枫开发的轻量级、简单易用的JavaScript暗箱插件。它提供了图像放大、响应式模态弹出和CSS3模糊淡入淡出动画等功能，并且还内置了提示框组件和复制剪贴板的功能。

该插件的主要功能是实现图像的放大效果，使用户能够在页面上点击图像后以模态弹出的方式查看更大的版本。这种交互方式不仅可以提供更好的用户体验，还可以让用户更清晰地查看图像的细节。

除了图像放大功能，xf-PictureBlackbox.js还提供了响应式的模态弹出效果。无论用户在哪种设备上访问页面，都能够得到一致的弹出效果，保证了用户在不同平台上的可用性。

此外，插件还利用CSS3技术实现了模糊淡入淡出动画效果，使页面的过渡更加平滑和美观。

使用教程

1.引入cdn xf-PictureBlackbox.js文件，无任何依赖，复制下面代码的即可【建议把源码放到本地引入】

<script src="./xf-PictureBlackbox.min.js"></script>

2.随便写个标签

<!-- 示例1： -->
<img class="xf-PicBlackbox" width="200" data-src="./nitai5v1.png" data-text="我是一张片呀">
<!-- 示例2： -->
<a href="JavaScript:;" class="xf-PicBlackbox" data-pic="./myQQImg.png" data-text="扫一扫添加好友">点我淡出图片和文本</a>
<!-- 示例3： -->
<button class="xf-PicBlackbox" data-pic="./pexels-aarti-vijay-2693529.jpg">点我不带data-text属性</button>

3.标签里面的属性分别代表的是

id/class="xf-PicBlackbox" 注意：这个名称'xf-PicBlackbox'一定要写，否则插件执行不了！！ 建议使用类名调用
data-pic="图片路径" 目前只能存放图片路径（外链），不能放视频链接。
data-text="图片文字" 点击文字就可以复制它（选填/可不填）
data-src：data-src 具有懒加载功能可直接替代 src 属性，并且不用写 data-pic 属性，也会有图片暗箱功能（img标签必填）