动态显示百分圆
<!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>