jQuery + CSS3

實現原理

原理非常的簡單，在這個方案中，最主要使用了CSS3的transform中的rotate和CSS3的clip兩個屬性。用他們來實現半圓和旋轉效果。

半環的實現

先來看其結構。

html

<div class="pie_right"><div class="right"></div><div class="mask"><span>0</span>%</div> </div>

　　css

.pie_right {width:200px; height:200px;position: absolute;top: 0;left: 0;background:#0cc; } .right {width:200px; height:200px;background:#00aacc;border-radius: 50%;position: absolute; top: 0;left: 0; } .pie_right, .right {clip:rect(0,auto,auto,100px); } .mask {width: 150px;height: 150px;border-radius: 50%;left: 25px;top: 25px; background: #FFF;position: absolute;text-align: center;line-height: 150px;font-size: 20px;background: #0cc;/* mask 是不需要剪切的，此處只是為了讓大家看到效果*/clip:rect(0,auto,auto,75px); }

　　實現半圓還是挺簡單的，利用border-radius做出圓角，然后利用clip做出剪切效果，（clip使用方法，詳見站內介紹），mask的部分是為了遮擋外面的容器，致使在視覺上產生圓環的效果：

旋轉的話，那更容易實現了，就是在CSS的right中加入.right { transform: rotate(30deg); }

這樣就可以看到一個半弧旋轉的效果了。

整環的實現

同樣道理，拼接左半邊圓環

<div class="circle"><div class="pie_left"><div class="left"></div></div><div class="pie_right"><div class="right"></div></div><div class="mask"><span>0</span>%</div> </div>

　　

.circle {width: 200px;height: 200px; position: absolute;border-radius: 50%;background: #0cc; } .pie_left, .pie_right {width: 200px; height: 200px;position: absolute;top: 0;left: 0; } .left, .right {display: block;width:200px; height:200px;background:#00aacc;border-radius: 50%;position: absolute;top: 0;left: 0;transform: rotate(30deg); } .pie_right, .right {clip:rect(0,auto,auto,100px); } .pie_left, .left {clip:rect(0,100px,auto,0); } .mask {width: 150px;height: 150px;border-radius: 50%;left: 25px;top: 25px;background: #FFF;position: absolute;text-align: center;line-height: 150px;font-size: 16px; }

圓環最終效果

Ok了，基本上我們的圓環已經實現完成了，下面是加入JS效果。

首先，我們需要考慮的是，圓環的轉動幅度大小，是由圓環里面數字的百分比決定的，從0%-100%，那么圓弧被分成了每份3.6°；而在180°，也就是50%進度之前，左側的半弧是不動的，當超過50%，左邊的半弧才會有轉動顯示。

$(function() {$('.circle').each(function(index, el) {var num = $(this).find('span').text() * 3.6;if (num<=180) {$(this).find('.right').css('transform', "rotate(" + num + "deg)");} else {$(this).find('.right').css('transform', "rotate(180deg)");$(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");};});});

　　

?

轉載于:https://www.cnblogs.com/zshh/p/5577457.html

總結

以上是生活随笔為你收集整理的环形进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。