<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          CSS3+JS實現靜態圓形進度條

          時間:?2018-01-02閱讀:?3538標簽:?繪制

          一、實現原理

          首先,我們來一個(黑色)。
          接著,再來兩個半圓,將黑色的圓遮住。(為了演示,左右兩側顏色不一樣)
          這時候,我們順時針旋轉右側藍色的半圓,下面的黑色圓就會暴露出來,比如我們旋轉45度(12.5%),效果出來了。
          如果我們將藍色的右半圓同樣設置成灰色,看效果,一個12.5%的餅圖就出來了!


          OK,我們再旋轉更大的度數試試,比如40%(144度),50%(180度),60%(216度)如下圖。
          我們發現,旋轉180度之后右半圓與左半圓重合了,如果再旋轉,就會在右上角冒出來,顯然不是我們想要的。


          我們希望的是,繼續旋轉被黑色遮住。。。嗯。。。怎么做呢?

          我們將右側的圓回歸原位,把它刷成黑色(和底色一樣),然后旋轉左邊的半圓(它在右側半圓的更底層),這樣,它就會被右側半圓遮住了。好的,廢話不多說,我們將左側的半圓順時針旋轉45度,效果出來了。可以想象,繼續旋轉,180度的時候,就完全被右側半圓遮住,而左側底色全部暴露,這樣100%顯示出來了。


          最后,加上一個白色的小圓,放在正中間就行了。

          好的,到這里,我們已經明白如何實現的了。


          二、代碼實現

          html部分

          <div class="circle-bar">
              <div class="circle-bar-left"></div>
              <div class="circle-bar-right"></div>
              <!-- 遮罩層,顯示百分比 -->
              <div class="mask">
                  <span class="percent">60%</span>
              </div>
          </div>
          

          css部分

              /*支持IE9及以上*/
              .circle-bar { font-size:200px; width: 1em; height: 1em; position: relative;  background-color: #333; }
              .circle-bar-left,.circle-bar-right { width: 1em; height: 1em; background-color: #eee; }
              /*
                  這里采用clip剪切了圓,實現左右兩個半圓,右半圓在后面,因此在更上一層,
                  clip的用法參考:http://www.w3school.com.cn/cssref/pr_pos_clip.asp
               */
              .circle-bar-right { clip:rect(0,auto,auto,.5em); }
              .circle-bar-left { clip:rect(0,.5em,auto,0); }
              
              .mask { width: 0.8em; height: 0.8em;  background-color: #fff;text-align: center;line-height: 0.2em; color:rgba(0,0,0,0.5); }
              .mask :first-child { font-size: 0.3em; height: 0.8em; line-height: 0.8em; display: block;  }
              /*所有的后代都水平垂直居中,這樣就是同心圓了*/
              .circle-bar * {  position: absolute; top:0; right:0; bottom:0; left:0; margin:auto; }
              /*自身以及子元素都是圓*/
              .circle-bar, .circle-bar > * { border-radius: 50%; }
              

          JavaScript實現

              //反正CSS3中的border-radius屬性IE8是不支持了,所以這里就用新方法吧getElementsByClassName()走起
              window.onload = function(){
          
                  var circleBar    = document.getElementsByClassName('circle-bar')[0];
                  var percent      = parseInt(circleBar.getElementsByClassName('percent')[0].firstChild.nodeValue);
                  var color        = circleBar.css('background-color');
                  var left_circle  = circleBar.getElementsByClassName('circle-bar-left')[0];
                  var right_circle = circleBar.getElementsByClassName('circle-bar-right')[0];
          
                  if( percent <= 50 ) {
                      var rotate = 'rotate('+(percent*3.6)+'deg)';
                      right_circle.css3('transform',rotate);
                  }else {
                      var rotate = 'rotate('+((percent-50)*3.6)+'deg)';
                      right_circle.css ('background-color',color);//背景色設置為進度條的顏色
                      right_circle.css3('transform','rotate(0deg)');//右側不旋轉
                      left_circle.css3 ('transform',rotate);//左側旋轉
                  }
              }
          
              //封裝了css3函數,主要是懶得重復書寫代碼,既然寫了css3函數,順便寫個css吧,統一樣式,好看一些
              Element.prototype.css = function(property,value){
                  
                  if ( value ) {
                      //CSS中像background-color這樣的屬性,‘-’在JavaScript中不兼容,需要設置成駝峰格式
                      var index = property.indexOf('-');
                      if( index != -1 ) {
                          var char = property.charAt(index+1).toUpperCase();
                          property.replace(/(-*){1}/,char);
                      }
                      this.style[property] = value;
                  }else{
                      //getPropertyValue()方法參數類似background-color寫法,所以不要轉駝峰格式
                      return window.getComputedStyle(this).getPropertyValue(property);
                  }
              }
          
              //封裝一個css3函數,用來快速設置css3屬性
              Element.prototype.css3 = function(property,value){
                  if( value ){
                      property = capitalize(property.toLowerCase());
                      this.style['webkit'+property] = value;
                      this.style['Moz'+property] = value;
                      this.style['ms'+property] = value;
                      this.style['O'+property] = value;
                      this.style[property.toLowerCase()] = value;
                  }else{
                      return window.getComputedStyle(this).getPropertyValue(
                              ('webkit'+property)||('Moz'+property)||('ms'+property)||('O'+property)||property);
                              //老實說,我不知道為什么要把不帶瀏覽器標記的放在最后,既然都這么用,我也這么做吧。不過這樣對現代瀏覽器來說可能并不好,判斷次數變多了
                  }
                  
                  //首字母大寫
                  function capitalize(word){
                      return word.charAt(0).toUpperCase() + word.slice(1);
                  }
              }
          

          jQuery實現

          
              $(function(){
          
                  var percent = parseInt($('.mask :first-child').text());
                  var baseColor = $('.circle-bar').css('background-color');
          
                  if( percent<=50 ){
                      $('.circle-bar-right').css('transform','rotate('+(percent*3.6)+'deg)');
                  }else {
                      $('.circle-bar-right').css({
                          'transform':'rotate(0deg)',
                          'background-color':baseColor
                      });
                      $('.circle-bar-left').css('transform','rotate('+((percent-50)*3.6)+'deg)');
                  }
              })
          
          

          jQuery這么簡單好用,為什么還要寫JavaScript?

          一來,學習JavaScript的使用,畢竟有些方法可能是不太熟悉的,多查查文檔,混個眼熟。
          二來,萬一項目中不需要使用jQuery呢,以后還得實現。


          三、總結體會

          在規定圓的大小的時候,使用了font-size屬性,而長度大小則基于font-size,也就是em為單位,這樣有一個好處,只要修改font-size的值,就可以改變圓的大小了,非常方便。

          另外,寫css的時候,盡可能將相同功能的代碼提取出來,將某個功能寫在一個{}中,起一個好名字,以后方便復用,bootstrap就是這么玩的,簡潔、易讀,通過classname基本就能知道標簽有哪些特性了。

          來源:segmentfault
          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/304

          我是如何用 CSS 繪制各種形狀的

          實現方式是通過border-radius這個屬性;border-radius它可以單獨指定水平和垂直半徑。用 / 分隔這兩個值。并且該屬性的值不僅可以接受長度值,還能接收百分比的值。百分比的值會基于元素的尺寸進行解析,寬是水平半徑的解析,高是垂直半徑的解析。

          css怎么繪制箭頭?

          在網頁制作中,很多時候都會有箭頭的情況,我們可以使用css來繪制箭頭,css是如何繪制箭頭的呢?下面我們來看一下使用css繪制箭頭的方法。

          純 CSS 實現大量小塊兒繪制

          現在做的項目是公司內部全部組要用的 viewer 庫. Viewer 需要的功能非常的多,其中的一個就是需要提供一些常用的繪圖API功能, 比如用戶鼠標移動畫箭頭,畫圈圈,高光選中文本等等。

          使用css3繪制畫圓,扇形,三角形的實現

          css已經越來越強大了 ,可以使用它來繪制各種簡單的形狀,用于代替圖片顯示,這次的分享主要用到畫圓,扇形,三角形等知識點,由于IE9以上才支持圓角,暫時不考慮兼容問題

          純css如何繪制三角形_利用border實現畫三角形的原理方法

          使用css畫三角形,首先想到的思路是:利用border邊框樣式來實現,這是由于border的邊框是由四個三角形組成的。

          如何使用css3繪制任意角度扇形+動畫

          使用兩個半圓做角度拼接。比如想繪制一個缺口朝右,缺口弧度30度角的扇形,那么將由一個旋轉65度角的半圓A+一個旋轉-65度角的半圓B組合而成。

          css實現自適應正方形的多種方法實現

          純CSS實現自適應瀏覽器寬度的正方形有以下三種方法:CSS3 vw 單位、設置垂直方向的padding撐開容器、利用偽元素的 margin(padding)-top 撐開容器

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网