jquery、css3动态显示百分比圆

动态显示百分圆
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style> 
.circle {
    width: 200px;
    height: 200px;  
    position: relative;
    float:left;
    border-radius: 50%;
    background: #F64E58;
    overflow: hidden;
}
.pie_left, .pie_right {
    width: 200px; 
    height: 200px;
    position: absolute;
    top: 0;left: 0;
}
.left, .right {
    width:200px; 
    height:200px;
    background:#C3C3C3;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 2s linear;

}
.left{transition: all 2s linear .5s;}

.right{
  /*  transform: rotate(30deg);*/
}
.pie_right, .right {
    clip:rect(0,auto,auto,100px);
}
.pie_left, .left {
    clip:rect(0,100px,auto,0);
}
.theValue {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    top: 10px;
    left: 10px;
    background: white;
    position: absolute;
    text-align: center;
    line-height: 180px;
    font-size: 20px;
    color: #F64E58;

}
</style>
</head>
<body>
    <div class="circle">
        <div class="pie_left"><div class="left"></div></div>
        <div class="pie_right"><div class="right"></div></div>
        <div class="theValue"><span class="vauNum">81</span>%</div>
    </div>
       <div class="circle">
        <div class="pie_left"><div class="left"></div></div>
        <div class="pie_right"><div class="right"></div></div>
        <div class="theValue"><span class="vauNum">20</span>%</div>
    </div>
<script type="text/javascript">
    $(function() {
    $('.circle').each(function(index, el) {
        var num = $(this).find('.vauNum').text() * 3.6;
        if (num<=180) {

            $(this).find('.right').animate({
                aa:num
            },{
                    step:function(now,fx){

                    $(this).css('transform', "rotate(" +now + "deg)");
            },
            duration:1500
        })
        } else{

            var that=$(this).find('.right');
             that.css('transform', "rotate(180deg)");
               $(this).css('transform', "rotate(0deg)");
            $(this).find('.left').animate({
              cc:num-180

            },{
               step:function(now,fx){
                  console.log(now+"ccc");

                        //参数step：规定每个动画的每一步完成之后要执行的函数
                        // now:是当前动画正在改变的属性的实时值；
                        // fx: jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如
                        // 执行动画的元素：elem;
                        // 动画正在改变的属性：prop;
                        // 正在改变属性的当前值：now;
                        // 正在改变属性的结束值：end;
                        // 正在改变属性的单位：unit;等
                        // 可在这里改变animate第1个参数中设置的属性bb在动画结束时的值

                   $(this).css('transform', "rotate(" + (now) + "deg)");

               },
                duration:1500
            })

        };
    });

});
</script>
</body>

</html>