頁面效果：圓形進度條 圓環進度條

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>

 

 

 

...