首页 > 代码库 > jquery html5图表动画圆形饼图特效
jquery html5图表动画圆形饼图特效
上图:
html和jquery实现的饼图特效,效果特好
使用方法:
引入脚本和css
<link href="http://www.mamicode.com/css/style.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="http://www.mamicode.com/js/jquery.js"></script> <script src="http://www.mamicode.com/js/jquery.min.js"></script> class="brush:js;toolbar:false">如果IE浏览器支持需要加载这个js<!--[if IE]><script src="http://www.mamicode.com/js/excanvas.js"></script><![endif]-->
- 页面部分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;}
- html代码主要是画布
<canvas id="chart" width="600" height="500"></canvas>
- 详细使用请查看预览Demo Demojquery html5图表动画圆形饼图特效Demo下载
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。