利用jQuery實現繪制3D水池柱形圖特效



15 59 20



特效描述:利用jQuery實現 繪制3D水池 柱形圖特效,利用jQuery實現繪制3D水池柱形圖特效

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">

2. 引入JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/waterTank.js"></script>

3. HTML代碼

<p style="text-align:center;">點擊柱狀圖可以動態改變高度值!</p>
<div class="wrap">
	<div class="tank waterTankHere1"></div>
	<div class="tank waterTankHere2"></div>
	<div class="tank waterTankHere3"></div>
</div>
<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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 加載動畫 滑動星星打分 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 其他 h5按鈕動畫 html5按鈕動畫 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 圖表
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 10年经典老版单机麻将 70棋牌游戏 广东三人麻将怎么打 福彩中心能控制中奖号码吗 dd彩票首页 财神捕鱼在哪里下载 中国体育彩票篮彩竞猜 吉林时时彩平台官网 穿古装卖什么赚钱 山东麻将二五八做将 竞彩足球比分即时比分 西红柿计划有网页版吗 南昌麻将规则怎么算胡 dnf90装备合成赚钱 北京单场暂停 花聊聊天真的能赚钱吗