jQuery 3D水池百分比柱形图特效

一款基于html5canvas和jQuery绘制的3D水池百分比柱形图特效，点击柱状图可以动态改变水量高度值！

js代码
<scriptsrc="js/jquery-1.11.0.min.js"type="text/javascript"></script>
<scriptsrc="js/waterTank.js"></script>
<script>
$(document).ready(function(){

$('.waterTankHere1').waterTank({
width:420,
height:360,
color:'skyblue',
level:83
}).on('click',function(event){
$(this).waterTank(Math.floor(Math.random()*100)+0);
});

$('.waterTankHere2').waterTank({
width:80,
height:360,
color:'red',
level:80
}).on('click',function(event){
$(this).waterTank(Math.floor(Math.random()*100)+0);
});

$('.waterTankHere3').waterTank({
width:20,
height:360,
color:'blue',
level:80
}).on('click',function(event){
$(this).waterTank(Math.floor(Math.random()*100)+0);
});
});
</script>



下载

2023-11-22 21:16 上传

点击文件名下载附件
售价: 1 金币  [记录]  [购买]