jquery html5图表动画圆形饼图特效

浏览数：127 / 时间：2015年06月09日

上图：

 

html和jquery实现的饼图特效，效果特好

使用方法：

  1. 引入脚本和css

  2. <link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
        <script src="js/jquery.min.js"></script> class="brush:js;toolbar:false">如果IE浏览器支持需要加载这个js
<!--[if IE]>
<script src="js/excanvas.js"></script>
<![endif]-->
  3. 页面部分css代码
  4. *{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;}
  5. html代码主要是画布
  6. <canvas id="chart" width="600" height="500"></canvas>
  7. 详细使用请查看预览Demo Demojquery html5图表动画圆形饼图特效Demo下载

jquery html5图表动画圆形饼图特效,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 java html src 使用 方法 class style 代码 java html src 使用 方法

相关文章

随机文章

您可能还喜欢

您可能还喜欢