国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS3+JS實現(xiàn)靜態(tài)圓形進(jìn)度條【清晰、易懂】

bergwhite / 1995人閱讀

摘要:一實現(xiàn)原理首先,我們來一個圓黑色。我們希望的是,繼續(xù)旋轉(zhuǎn)被黑色遮住。。。二來,萬一項目中不需要使用呢,以后還得實現(xiàn)。

在寫這篇文章之前,筆者查看了多篇博客,無奈前輩大多只是貼了代碼,沒有清晰明了的注釋,所以容易讓新人看得云里霧里。這里,筆者在弄明白原理后,對代碼進(jìn)行了優(yōu)化,決定寫(總結(jié))一篇清晰、明了的圓形進(jìn)度條的實現(xiàn),以便后人能快速搞懂。

一、實現(xiàn)原理

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

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

我們希望的是,繼續(xù)旋轉(zhuǎn)被黑色遮住。。。嗯。。。怎么做呢?

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


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

好的,到這里,我們已經(jīng)明白如何實現(xiàn)的了。

二、代碼實現(xiàn)

html部分

60%

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剪切了圓,實現(xiàn)左右兩個半圓,右半圓在后面,因此在更上一層,
        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實現(xiàn)

    //反正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);//背景色設(shè)置為進(jìn)度條的顏色
            right_circle.css3("transform","rotate(0deg)");//右側(cè)不旋轉(zhuǎn)
            left_circle.css3 ("transform",rotate);//左側(cè)旋轉(zhuǎn)
        }
    }

    //封裝了css3函數(shù),主要是懶得重復(fù)書寫代碼,既然寫了css3函數(shù),順便寫個css吧,統(tǒng)一樣式,好看一些
    Element.prototype.css = function(property,value){
        
        if ( value ) {
            //CSS中像background-color這樣的屬性,‘-’在JavaScript中不兼容,需要設(shè)置成駝峰格式
            var index = property.indexOf("-");
            if( index != -1 ) {
                var char = property.charAt(index+1).toUpperCase();
                property.replace(/(-*){1}/,char);
            }
            this.style[property] = value;
        }else{
            //getPropertyValue()方法參數(shù)類似background-color寫法,所以不要轉(zhuǎn)駝峰格式
            return window.getComputedStyle(this).getPropertyValue(property);
        }
    }

    //封裝一個css3函數(shù),用來快速設(shè)置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);
                    //老實說,我不知道為什么要把不帶瀏覽器標(biāo)記的放在最后,既然都這么用,我也這么做吧。不過這樣對現(xiàn)代瀏覽器來說可能并不好,判斷次數(shù)變多了
        }
        
        //首字母大寫
        function capitalize(word){
            return word.charAt(0).toUpperCase() + word.slice(1);
        }
    }

jQuery實現(xiàn)

    $(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?

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

三、總結(jié)體會

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

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

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/90551.html

相關(guān)文章

  • CSS3+JS實現(xiàn)靜態(tài)圓形進(jìn)度清晰易懂

    摘要:一實現(xiàn)原理首先,我們來一個圓黑色。我們希望的是,繼續(xù)旋轉(zhuǎn)被黑色遮住。。。二來,萬一項目中不需要使用呢,以后還得實現(xiàn)。 在寫這篇文章之前,筆者查看了多篇博客,無奈前輩大多只是貼了代碼,沒有清晰明了的注釋,所以容易讓新人看得云里霧里。這里,筆者在弄明白原理后,對代碼進(jìn)行了優(yōu)化,決定寫(總結(jié))一篇清晰、明了的圓形進(jìn)度條的實現(xiàn),以便后人能快速搞懂。 一、實現(xiàn)原理 首先,我們來一個圓(黑色)。接...

    developerworks 評論0 收藏0
  • css3實現(xiàn)圓形進(jìn)度

    摘要:在開發(fā)微信小程序的時候,遇到圓形進(jìn)度條的需求。但使用和實現(xiàn)進(jìn)度條就很容易的避免了這方面的問題。如下圖最下面的圓形是進(jìn)度條的背景,在上面有和兩個長方形,用來覆蓋不要顯示的進(jìn)度條。在兩個長方形的里面分別有一個半圓形用來顯示進(jìn)度。 在開發(fā)微信小程序的時候,遇到圓形進(jìn)度條的需求。使用canvas繪圖比較麻煩: 1、為了實現(xiàn)在不同屏幕上面的適配,必須動態(tài)的計算進(jìn)度條的大小; 2、在小程序...

    leanote 評論0 收藏0
  • css3實現(xiàn)圓形進(jìn)度

    摘要:在開發(fā)微信小程序的時候,遇到圓形進(jìn)度條的需求。但使用和實現(xiàn)進(jìn)度條就很容易的避免了這方面的問題。如下圖最下面的圓形是進(jìn)度條的背景,在上面有和兩個長方形,用來覆蓋不要顯示的進(jìn)度條。在兩個長方形的里面分別有一個半圓形用來顯示進(jìn)度。 在開發(fā)微信小程序的時候,遇到圓形進(jìn)度條的需求。使用canvas繪圖比較麻煩: 1、為了實現(xiàn)在不同屏幕上面的適配,必須動態(tài)的計算進(jìn)度條的大小; 2、在小程序...

    enali 評論0 收藏0
  • vue 圓形進(jìn)度組件解析

    摘要:項目簡介本組件是下的圓形進(jìn)度條動畫組件自由可定制,幾乎全部參數(shù)均可設(shè)置源碼簡單清晰面向人群急于使用圓形進(jìn)度條動畫組件的同學(xué)。由于動畫關(guān)鍵幀的定義需要根據(jù)外部傳入的參數(shù)決定,不能預(yù)先寫死。所以通過生成節(jié)點的方式插入關(guān)鍵幀。 項目簡介 本組件是vue下的圓形進(jìn)度條動畫組件 自由可定制,幾乎全部參數(shù)均可設(shè)置 源碼簡單清晰showImg(https://segmentfault.com/im...

    Cheng_Gang 評論0 收藏0
  • 實現(xiàn)環(huán)形進(jìn)度CSS3+jQuery/Vue)

    摘要:整體思路是通過裁切產(chǎn)生兩個半圓展示出靜態(tài)的進(jìn)度條,而后通過旋轉(zhuǎn)角度的變化產(chǎn)生動態(tài)效果。而藍(lán)色部分元素的顏色,是我們還未到達(dá)的進(jìn)度。演示勤快的我去里寫了一下這個是的實現(xiàn)這個是的實現(xiàn)環(huán)形進(jìn)度條。參考文章利用和實現(xiàn)環(huán)形進(jìn)度條 整體思路是:通過裁切(clip)產(chǎn)生兩個半圓展示出靜態(tài)的進(jìn)度條,而后通過旋轉(zhuǎn)(rotate)角度的變化產(chǎn)生動態(tài)效果。 先來回顧兩個基礎(chǔ)知識點 (1)css的一個不常見的...

    BWrong 評論0 收藏0

發(fā)表評論

0條評論

bergwhite

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<