js轻量级图片暗箱插件
xf-PictureBlackbox.js是小枫写的一套轻量级和简单易用的JavaScript暗箱插件,用来显示图像的放大,响应模态弹出和CSS3模糊淡入淡出动画,并内置提示框组件和复制剪切版的功能。
文件压缩后6kb都不到,还在等什么?】
使用起来贼简单,真的有手就行~】
demo演示
演示 :https://player.xfyun.club/js/xf-Picture-Blackbox/demo.html
使用教程(保姆级)
1. 引入cdn xf-PictureBlackbox.min.js文件,无任何依赖,直接引入下面的代码的即可
<script src="https://player.xfyun.club/js/xf-Picture-Blackbox/xf-PictureBlackbox.min.js"></script>
2. 随便写个标签
<!-- id/class:xf-PicBlackbox (必填) data-pic:设置图片路径 (必填) data-text:设置图片文本 (选填) data-src:data-src 具有懒加载功能可直接替代 src 属性,并且不用写 data-pic 属性,也会有图片暗箱功能(img标签必填) data-popUp: 开启懒加载后是否弹出图片, data-popUp 值为 true 或者为 1 则弹出该图片(默认点击是不弹出图片) --> <!-- 示例1: --> <img class="xf-PicBlackbox" width="200" data-src="./nitai5v1.png" data-text="我是一张片呀" data-popUp="true"> <!-- 示例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> <!-- 示例4: --> <img class="xf-PicBlackbox" width="200" data-src="./nitai5v1.png" data-text="我不弹出图片"> <!-- 引入插件 --> <script src="https://player.xfyun.club/js/xf-Picture-Blackbox/xf-PictureBlackbox.min.js"></script> ...
3. 标签里面有3个属性分别代表的是
id/class="xf-PicBlackbox" 注意:这个名称'xf-PicBlackbox'一定要写,否则插件执行不了!! 建议使用类名调用
data-pic="图片路径" 目前只能存放图片路径(外链),不能放视频链接。
data-text="图片文字" 点击文字就可以复制它(选填/可不填)
data-src:data-src 具有懒加载功能可直接替代 src 属性,并且不用写 data-pic 属性,也会有图片暗箱功能(img标签必填)
data-popUp: 添加该属性后img标签则不弹出图片,可不写值(选填)
展示图
demo展示1
demo展示2
代码展示