一款基于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>
下载
|
|