dowebok

Waterbubble – jQuery水球图插件

分类:代码 日期: 点击(31,376) 评论(3)

Waterbubble - jQuery水球图插件

演 示 下 载

简介

Waterbubble 是一款基于 jQuery 和 Canvas 实现的动态水球图插件,你可以使用它来显示各种进度情况。

浏览器兼容

IE Edge Chrome Firefox Opera Safari
IE9+ ✔ Edge ✔ Chrome ✔ Firefox ✔ Opera ✔ Safari ✔

使用方法

1、引入文件

<script src="js/jquery.min.js"></script>
<script src="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

标签:

相关文章

发表评论