jQuery10种不同的水球效果

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

生成水球的canvas

<canvas id="erdangjiade"></canvas>

演示一：默认效果

$('#erdangjiade').waterbubble();

演示二：设置水球半径

$('#erdangjiade').waterbubble({
    radius: 200
});

演示三：边框宽度

$('#erdangjiade').waterbubble({
    lineWidth: 10
});

演示四：数据多少

$('#erdangjiade').waterbubble({
    data: 0.3
});

演示五：水球颜色

$('#erdangjiade').waterbubble({ waterColor: 'rgba(0, 0, 0, 1)' });

演示六：显示文本

$('#erdangjiade').waterbubble({
    txt: '50%'
});

演示七：文本颜色

$('#erdangjiade').waterbubble({
    txt: '50%',
    textColor: 'rgba(0, 0, 0, 0.8)'
});

演示八：设置字体

$('#erdangjiade').waterbubble({
    txt: 'erdangjiade',
    font: 'bold 25px arial'
});

演示九：是否显示波纹

$('#erdangjiade').waterbubble({
    wave: false
});

演示十：是否显示动画

$('#erdangjiade').waterbubble({
    animation: false
});