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