可爱喵 发表于 2023-12-14 09:00:01

JS轻量级图片暗箱插件 - 免/费开源

JS轻量级图片暗箱插件xf-PictureBlackbox.js是小枫写的一套轻量级和简单易用的JavaScript暗箱插件，用来显示图像的放大，响应模态弹出和CSS3模糊淡入淡出动画，并内置提示框组件和复制剪切版的功能。文件压缩后6kb都不到，还在等什么？】使用起来贼简单，真的有手就行~】使用教程（保姆级）1. 引入xf-PictureBlackbox.min.js文件**** Hidden Message *****
<!--
    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标签则不弹出图片，可不写值（选填）https://pic.imgdb.cn/item/6578910cc458853aef3c278b.gif
**** Hidden Message *****

神奇的点 发表于 2023-12-14 09:10:42

楼主一生平安！好人一生平安！希望楼主继续分享更多好用的东西！谢谢！

sk623 发表于 2023-12-14 09:26:55

感谢分享

TIANGYU 发表于 2023-12-14 13:50:36

1

wxa 发表于 2023-12-14 23:52:51

看看隐藏

gazhua 发表于 2023-12-16 12:33:40

嗖嘎

linyuhengshi 发表于 2023-12-16 13:49:40

还好还好哈

织绪 发表于 2023-12-18 15:45:19

感谢分享

织绪 发表于 2023-12-18 15:47:27

感谢分享

wx87494126 发表于 2023-12-18 16:42:40

楼主一生平安
页: [1] 2
查看完整版本: JS轻量级图片暗箱插件 - 免/费开源