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

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

js代码

 

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="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>
点击下载
RIPRO主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
优富资源 » jQuery 3D水池百分比柱形图特效
  • 1会员总数(位)
  • 927资源总数(个)
  • 0本周发布(个)
  • 0今日发布(个)
  • 3094稳定运行(天)

优富资源网 国内最专业的站长资源平台

WordPress专区 整站源码

切换

博客


全屏


顶部