利用jquery html5实现图表动画圆形饼图



51 201 68



特效描述:利用jquery html5实现 图表动画 圆形饼图,利用jquery html5实现图表动画圆形饼图

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/excanvas.js"></script>
<script type="text/javascript" src="js/pieChart.js"></script>

3. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{background:#fff;color:#333;font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;font-size:0.9em;}
#container{width:900px;margin:50px auto;}
#chart, #chartData{border:1px solid #333;background:#ebedf2 url("images/gradient.png") repeat-x 0 0;}
#chart{display:block;margin:0 0 50px 0;float:left;cursor:pointer;}
#chartData{width:200px;margin:0 40px 0 0;float:right;border-collapse:collapse;box-shadow:0 0 1em rgba(0, 0, 0, 0.5);-moz-box-shadow:0 0 1em rgba(0, 0, 0, 0.5);-webkit-box-shadow:0 0 1em rgba(0, 0, 0, 0.5);background-position:0 -100px;}
#chartData th, #chartData td{padding:0.5em;border:1px dotted #666;text-align:left;}
#chartData th{border-bottom:2px solid #333;text-transform:uppercase;}
#chartData td{cursor:pointer;}
#chartData td.highlight{background:#e8e8e8;}
#chartData tr:hover td{background:#f0f0f0;}
</style>
<!--[if IE]>
<![endif]-->
<div id="container">
		<canvas id="chart" width="600" height="500"></canvas>
		<table id="chartData">
			<tr>
				<th>51前端素材</th><th>下载量</th>
			</tr>
			<tr style="color:#0DA068">
				<td>jquery图片特效</td><td>1862.12</td>
			</tr>
			<tr style="color:#194E9C">
				<td>jquery导航菜单</td><td>1316.00</td>
			</tr>
			<tr style="color:#ED9C13">
				<td>jquery选项卡特效</td><td>712.49</td>
			</tr>
			<tr style="color:#ED5713">
				<td>jquery文字特效</td><td>3236.27</td>
			</tr>
			<tr style="color:#057249">
				<td>jquery表单特效</td><td>6122.06</td>
			</tr>
			<tr style="color:#5F91DC">
				<td>html5特效</td><td>128.11</td>
			</tr>
			<tr style="color:#F88E5D">
				<td>html5 图表</td><td>245.55</td>
			</tr>
		</table>
	</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 滑动星星打分 其他更多 切换按钮 图表

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到