![[代码样式]Waterbubble – jQuery水球图插件](https://www.weimahe.com/wp-content/uploads/2020/08/3Kdr8a1732.png "[代码样式]Waterbubble – jQuery水球图插件")
简介
Waterbubble 是一款基于 jQuery 和 Canvas 实现的动态水球图插件，你可以使用它来显示各种进度情况。
浏览器兼容
![[代码样式]Waterbubble – jQuery水球图插件](https://www.weimahe.com/wp-content/uploads/2020/08/myJcfT1694.png "[代码样式]Waterbubble – jQuery水球图插件"){kind=small} |
![[代码样式]Waterbubble – jQuery水球图插件](https://www.weimahe.com/wp-content/uploads/2020/08/6vuYXS1729.png "[代码样式]Waterbubble – jQuery水球图插件"){kind=small} |
![[代码样式]Waterbubble – jQuery水球图插件](https://www.weimahe.com/wp-content/uploads/2020/08/sKKNqV1694.png "[代码样式]Waterbubble – jQuery水球图插件"){kind=small} |
![[代码样式]Waterbubble – jQuery水球图插件](https://www.weimahe.com/wp-content/uploads/2020/08/3dMJ071694.png "[代码样式]Waterbubble – jQuery水球图插件"){kind=small} |
![[代码样式]Waterbubble – jQuery水球图插件](https://www.weimahe.com/wp-content/uploads/2020/08/J1fEzh1694.png "[代码样式]Waterbubble – jQuery水球图插件"){kind=small} |
![[代码样式]Waterbubble – jQuery水球图插件](https://www.weimahe.com/wp-content/uploads/2020/08/mUTY3d1694.png "[代码样式]Waterbubble – jQuery水球图插件"){kind=small} |
|---|---|---|---|---|---|
| IE9+ ✔ | Edge ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
使用方法
1、引入文件
<script src="https://www.dowebok.com/js/jquery.min.js"></script> <script src="https://www.dowebok.com/js/waterbubble.js"></script>
2、HTML
<canvas id="dowebok"></canvas>
3、JavaScript
$('#dowebok').waterbubble();
配置
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| radius | 整数 | 100 | 水球的半径 |
| lineWidth | 整数 | undefined | 水球的边框宽度 |
| data | 浮点数/整数 | 0.5 | 水球内水的多少（数据多少） |
| waterColor | 字符串 | rgba(25, 139, 201, 1) | 水球的颜色和透明度 |
| txt | 字符串 | undefined | 水球内的文本 |
| textColor | 字符串 | rgba(06, 85, 128, 0.8) | 文本的颜色和透明度 |
| font | 字符串 | 空 | 设置文本字体 |
| wave | 布尔值 | true | 是否显示波纹 |
| animation | 布尔值 | true | 是否显示动画 |
插件来自 jqueryscript.net。
[b2_file link="
百度网盘" name="Waterbubble – jQuery水球图插件" pass="" code=""]
