特效描述:利用jquery html5实现 图表动画 圆形饼图。利用jquery html5实现图表动画圆形饼图
代码结构
1. 引入CSS
2. 引入JS
3. HTML代码
*{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;}
51前端素材 | 下载量 |
---|---|
jquery图片特效 | 1862.12 |
jquery导航菜单 | 1316.00 |
jquery选项卡特效 | 712.49 |
jquery文字特效 | 3236.27 |
jquery表单特效 | 6122.06 |
html5特效 | 128.11 |
html5 图表 | 245.55 |