查看: 1686|回复: 13

[网页单页面源码] JS轻量级图片暗箱插件 - 免/费开源

[复制链接]
累计签到:339 天
连续签到:3 天

1481

主题

-70

回帖

1万

积分

热心会员

名望
0
星币
4607
星辰
0
好评
69

幸运猪

发表于 2023-12-14 09:00:01 | 显示全部楼层 |阅读模式

注册登录后全站资源免费查看下载

您需要 登录 才可以下载或查看,没有账号?立即注册

×
JS轻量级图片暗箱插件
xf-PictureBlackbox.js是小枫写的一套轻量级和简单易用的JavaScript暗箱插件,用来显示图像的放大,响应模态弹出和CSS3模糊淡入淡出动画,并内置提示框组件和复制剪切版的功能。
文件压缩后6kb都不到,还在等什么?】
使用起来贼简单,真的有手就行~】
使用教程(保姆级)
1. 引入xf-PictureBlackbox.min.js文件
游客,如果您要查看本帖隐藏内容请回复

  1. <!--
  2.     id/class:xf-PicBlackbox (必填)
  3.     data-pic:设置图片路径 (必填)
  4.     data-text:设置图片文本 (选填)
  5.     data-src:data-src 具有懒加载功能可直接替代 src 属性,并且不用写 data-pic 属性,也会有图片暗箱功能(img标签必填)
  6.     data-popUp: 开启懒加载后是否弹出图片, data-popUp 值为 true 或者为 1 则弹出该图片(默认点击是不弹出图片)
  7. -->

  8.     <!-- 示例1: -->
  9.     <img class="xf-PicBlackbox" width="200" data-src="./nitai5v1.png" data-text="我是一张片呀" data-popUp="true">

  10.     <!-- 示例2: -->
  11.     <a href="JavaScript:;" class="xf-PicBlackbox" data-pic="./myQQImg.png" data-text="扫一扫添加好友">点我淡出图片和文本</a>

  12.     <!-- 示例3: -->
  13.     <button class="xf-PicBlackbox" data-pic="./pexels-aarti-vijay-2693529.jpg">点我不带data-text属性</button>

  14.     <!-- 示例4: -->
  15.     <img class="xf-PicBlackbox" width="200" data-src="./nitai5v1.png" data-text="我不弹出图片">

  16.     <!-- 引入插件 -->
  17.     <script src="https://player.xfyun.club/js/xf-Picture-Blackbox/xf-PictureBlackbox.min.js"></script>

  18. ...
复制代码
3. 标签里面有3个属性分别代表的是
id/class="xf-PicBlackbox" 注意:这个名称'xf-PicBlackbox'一/定要写,否则插件执行不了!! 建议使用类名调用
data-pic="图片路径" 目前只能存放图片路径(外链),不能放视/频链接。
data-text="图片文字" 点击文字就可以复制它(选填/可不填)
data-src:data-src 具有懒加载功能可直接替代 src 属性,并且不用写 data-pic 属性,也会有图片暗箱功能(img标签必填)
data-popUp: 添加该属性后img标签则不弹出图片,可不写值(选填)

游客,如果您要查看本帖隐藏内容请回复

有啥问题可以私信问我,看到会回复。有啥问题可以私信问我,看到会回复。有啥问题可以私信问我,看到会回复。

有啥问题可以私信问我,看到会回复。有啥问题可以私信问我,看到会回复。有啥问题可以私信问我,看到会回复。
回复

使用道具 举报

累计签到:328 天
连续签到:1 天

0

主题

689

回帖

4251

积分

练星

名望
0
星币
3276
星辰
0
好评
12

星座专属勋章在线大神灌水天才奖欢乐天使奖幸运猪鼎力支持奖五一勋章

发表于 2023-12-14 09:10:42 | 显示全部楼层
楼主一生平安!好人一生平安!希望楼主继续分享更多好用的东西!谢谢!
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
回复 支持 反对

使用道具 举报

累计签到:17 天
连续签到:1 天

0

主题

12

回帖

226

积分

星碎

名望
0
星币
197
星辰
0
好评
0
发表于 2023-12-14 09:26:55 | 显示全部楼层
感谢分享
默认签名:偏爱是我家,发展靠大家! 社区反馈邮箱Mail To:service@pai.al或paijishu@outlook.com
回复 支持 反对

使用道具 举报

累计签到:121 天
连续签到:1 天

0

主题

61

回帖

720

积分

星空

名望
0
星币
609
星辰
0
好评
0

在线大神欢乐天使奖灌水天才奖

发表于 2023-12-14 13:50:36 | 显示全部楼层
1
默认签名:偏爱是我家,发展靠大家! 社区反馈邮箱Mail To:service@pai.al或paijishu@outlook.com
回复 支持 反对

使用道具 举报

累计签到:291 天
连续签到:78 天

1

主题

458

回帖

5605

积分

星主

名望
0
星币
4973
星辰
0
好评
-30

灌水天才奖欢乐天使奖鼎力支持奖在线大神幸运猪五一勋章

发表于 2023-12-14 23:52:51 来自手机 | 显示全部楼层
看看隐藏
默认签名:偏爱是我家,发展靠大家! 社区反馈邮箱Mail To:service@pai.al或paijishu@outlook.com
回复 支持 反对

使用道具 举报

累计签到:6 天
连续签到:1 天

0

主题

9

回帖

107

积分

星光

名望
0
星币
89
星辰
0
好评
0
发表于 2023-12-16 12:33:40 | 显示全部楼层
嗖嘎
默认签名:偏爱是我家,发展靠大家! 社区反馈邮箱Mail To:service@pai.al或paijishu@outlook.com
回复 支持 反对

使用道具 举报

累计签到:46 天
连续签到:1 天

1

主题

51

回帖

266

积分

星碎

名望
0
星币
170
星辰
0
好评
0
发表于 2023-12-16 13:49:40 来自手机 | 显示全部楼层
还好还好哈
默认签名:偏爱是我家,发展靠大家! 社区反馈邮箱Mail To:service@pai.al或paijishu@outlook.com
回复 支持 反对

使用道具 举报

累计签到:294 天
连续签到:2 天

0

主题

58

回帖

1080

积分

星体

名望
0
星币
940
星辰
0
好评
0
发表于 2023-12-18 15:45:19 | 显示全部楼层
感谢分享
默认签名:偏爱是我家,发展靠大家! 社区反馈邮箱Mail To:service@pai.al或paijishu@outlook.com
回复 支持 反对

使用道具 举报

累计签到:294 天
连续签到:2 天

0

主题

58

回帖

1080

积分

星体

名望
0
星币
940
星辰
0
好评
0
发表于 2023-12-18 15:47:27 | 显示全部楼层
感谢分享
默认签名:偏爱是我家,发展靠大家! 社区反馈邮箱Mail To:service@pai.al或paijishu@outlook.com
回复 支持 反对

使用道具 举报

累计签到:502 天
连续签到:76 天

3

主题

50

回帖

1796

积分

星体

名望
0
星币
1607
星辰
0
好评
-4

国庆节勋章在线大神幸运猪

发表于 2023-12-18 16:42:40 | 显示全部楼层
楼主一生平安
默认签名:偏爱是我家,发展靠大家! 社区反馈邮箱Mail To:service@pai.al或paijishu@outlook.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|偏爱技术社区-偏爱技术吧-源码-科学刀-我爱辅助-娱乐网--教开服-游戏源码

偏爱技术社区-偏爱技术吧-源码-科学刀-我爱辅助-娱乐网-游戏源码

Powered by Discuz! X3.5

GMT+8, 2024-11-22 09:30 , Processed in 0.100242 second(s), 59 queries .

快速回复 返回顶部 返回列表