http://www.cnblogs.com/eyeear/p/5278092.html canvas绘制百分比圆环进度条 2016-4-21
环形进度条(1.5秒之内倒计时) 2016-3-28
效果做的比较粗糙,就是css的 clip属性,先切右边一半,再切左边一半。根据三角函数计算y高度
http://www.w3school.com.cn/cssref/pr_pos_clip.asp css的clip属性
clip是个兼容性高的css,这个例子的圆环,是分3步:第一步右上角1/4圆,从上到下;第二步右下角1/4圆,从右到左;第三步左侧半圆,从下到上。 虽然不是很“圆”,但是在1.5秒倒计时时限内,也不必讲究太多,只要兼容性好点就行了。
<script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".box").click(function(){ var x000 = 360; var x = 0; var timer = setInterval(function(){ var a = x / 180; y=(1-Math.cos(Math.PI*a))*50; console.log(x); console.log('>>>> y = '+y);
$('.clip-l').css('clip',' rect(0px 0px 0px 0px)');
if(x<=180){ $('.clip-r').css('clip',' rect(0px 100px '+y+'px 50px)'); }else{ $('.clip-l').css('clip',' rect('+y+'px 50px 100px 0px)'); } $('.txt').html(parseInt(x/360*100)+'%'); x = x+10; if(x > x000){ clearInterval(timer); } },20);//定时循环n次 }); }); </script> <style type="text/css"> .box{position:relative;width:100px;height:100px;overflow:hidden;} .txt{position:absolute;left:0;top:40px;width:100px;height:20px;text-align:center;color:#999;font-size:20px;font-weight:bold;z-index:1;} .clipbox{position:absolute;width:100px;height:100px;border-radius:50%;background:#ff3388;box-shadow:0px 0px 10px #999;} .clip-r{clip: rect(0px 100px 100px 50px);} .clip-l{clip: rect(0px 50px 100px 0px);} .clip-0{clip: rect(0 0 0 0);} .box-fff{position:absolute;left:10px;top:10px;width:80%;height:80%;border-radius:50%;background:#fff;} </style> <div class="box"> <div class="txt"></div> <div class="clipbox clip-r"> <div class="box-fff"></div> </div> <div class="clipbox clip-l"> <div class="box-fff"></div> </div> </div>
2016-3-29 改进版
<script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".box").click(function(){ var x000 = 360;//360度 var step = 5;//每步增加5度 var x = 0; var timeout = Math.ceil( (1500 / x000) * step ); //alert(timeout); var timer = setInterval(function(){ y=(1-Math.cos( Math.PI*(x/180) ))*80; console.log(x); console.log('>>>> y = '+y); $('.clip-l').css('clip',' rect(0px 0px 0px 0px)'); if(x<=180){ $('.clip-r').css('clip',' rect(0px 160px '+y+'px 80px)'); }else{ $('.clip-l').css('clip',' rect('+y+'px 80px 160px 0px)'); } $('.txt').html(parseInt(x/360*100)); x = x+step; if(x > x000){ clearInterval(timer); } },timeout);//定时循环n次 }); }); </script> <style type="text/css"> body{background:#ccc;} .boxhouse{position:fixed;width:370px;height:330px;background:url(images/second.png) no-repeat;} .box{position:absolute;left:100px;top:87px;width:160px;height:160px;} .txtbox{position:absolute;left:0;top:50%;margin-top:-21px;width:160px;height:42px;line-height:42px;font-size:42px;text-align:center;color:#999;font-weight:bold;font-family:'Microsoft YaHei';z-index:1;} .clipbox{position:absolute;width:160px;height:160px;background:url(images/second_circle.gif) no-repeat;} .clip-r{clip: rect(0px 160px 160px 80px);} .clip-l{clip: rect(0px 80px 160px 0px);} .txt-zz{position:absolute;left:90px;bottom:35px;font-size:24px;font-weight:bold;color:#ff4200;font-family:'Microsoft YaHei';} </style> <div class="boxhouse"> <div class="box"> <div class="txtbox"><span class="txt">0</span><span class="f16">%</span></div> <div class="clipbox clip-r"></div> <div class="clipbox clip-l"></div> </div> <div class="txt-zz">正在为您生成</div> </div>
2016-3-29 11:00 又改了一版。可兼容ie7和ie7以上所有。(手机上的这类动画,还是采用css3吧。PC上兼容性要求高的,用这个)
效果还是比较僵硬,不过clip切片改为3个:右上象限、右下象限、左侧上下两个象限
<script src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ $(".boxhouse").click(function(){ var x000 = 360;//360度 var step = 5;//每步增加5度 var x = 0; var timeout = Math.ceil( (1500 / x000) * step ); //alert(timeout); var timer = setInterval(function(){ y=(1-Math.cos( Math.PI*(x/180) ))*80; //console.log(x); //console.log('>>>> y = '+y); if(x<=90){ $('.clip-r1').css('clip',' rect(0px 160px '+y+'px 80px)'); $('.clip-r2').css('clip',' rect(0px 0px 0px 0px)'); $('.clip-l').css('clip',' rect(0px 0px 0px 0px)'); }else if(x<=180){ y=80+1*Math.sin( Math.PI*(x/180) )*80; $('.clip-r2').css('clip',' rect(80px 160px 160px '+(y)+'px)'); $('.clip-l').css('clip',' rect(0px 0px 0px 0px)'); }else{ $('.clip-l').css('clip',' rect('+y+'px 80px 160px 0px)'); } $('.txt').html(parseInt(x/360*100)); x = x+step; if(x > x000){ clearInterval(timer); } },timeout);//定时循环n次 }); }); </script> <style type="text/css"> body{background:#ccc;} .f16{font-size:16px;} .boxhouse{position:fixed;width:370px;height:330px;background:url(images/second.png) no-repeat;}/*背景*/ .box{position:absolute;left:100px;top:87px;width:160px;height:160px;} .txtbox{position:absolute;left:0;top:50%;margin-top:-21px;width:160px;height:42px;line-height:42px;font-size:42px;text-align:center;color:#999;font-weight:bold;font-family:'Microsoft YaHei';z-index:1;} .clipbox{position:absolute;left:0;top:0;width:160px;height:160px;background:url(images/second_circle.png) no-repeat;}/*圆环*/ .clip-r1{clip: rect(0px 160px 80px 80px);} .clip-r2{clip: rect(80px 160px 160px 80px);} .clip-l{clip: rect(0px 80px 160px 0px);} .txt-zz{position:absolute;left:90px;bottom:35px;font-size:24px;font-weight:bold;color:#ff4200;font-family:'Microsoft YaHei';} </style> <div class="boxhouse"> <div class="box"> <h5 class="txtbox"><span class="txt">0</span><span class="f16">%</span></h5> <div class="clipbox clip-r1"></div> <div class="clipbox clip-r2"></div> <div class="clipbox clip-l"></div> </div> <div class="txt-zz">正在为您生成</div> </div>
...