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

資訊專欄INFORMATION COLUMN

實(shí)現(xiàn)環(huán)形進(jìn)度條的幾種方法

Scliang / 2382人閱讀

摘要：環(huán)形進(jìn)度條的問題，網(wǎng)上有很多的，也有各種不同的實(shí)現(xiàn)方式，很棒的實(shí)現(xiàn)也有很多，我這自己做一下一方面是想開闊一下自己的思路，一方面好久沒看和的東西了，基礎(chǔ)的拿來熟悉下。

環(huán)形進(jìn)度條的問題，網(wǎng)上有很多的demo，也有各種不同的實(shí)現(xiàn)方式，很棒的實(shí)現(xiàn)也有很多，我這自己做一下一方面是想開闊一下自己的思路，一方面好久沒看SVG和Canvas的東西了，基礎(chǔ)的拿來熟悉下。

DIV + CSS3

這個(gè)是最基本的實(shí)現(xiàn)方式，我在想怎樣用盡量少的DOM結(jié)構(gòu)來實(shí)現(xiàn)，最終還是用了三個(gè)div，不過這個(gè)方法僅供開闊思路，樣式表現(xiàn)在PC還好，手機(jī)上的問題就多了，僅供參考。

1、利用div的border畫一個(gè)背景的圓環(huán)

    

    /* css */
    .demo1-bg1{
        width: 100px;
        height: 100px;
        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        margin: 50px auto;
        background: fff;
        border-radius: 50%;
        box-shadow: 0 0 0 10px red inset;
    }

2、添加兩個(gè)子元素div，分別設(shè)置border來實(shí)現(xiàn)兩個(gè)半圓環(huán)并遮蓋背景圓環(huán)

    

        

        

    

    /* css */
    .demo1-bg2-1,.demo1-bg2-2{
        position: relative;
        margin: 0;
        padding: 0;
        -webkit-box-flex: 1;
        height: 80px;
        background: #fff;
        border: 10px solid grey;
    }
    .demo1-bg2-1{
        border-radius: 50px 0 0 50px;
        border-color: grey transparent grey grey;
        transform-origin: 100% 50%;
        z-index: 1;
    }
    .demo1-bg2-2{
        border-radius: 0 50px 50px 0;
        border-color: grey grey grey transparent;
        transform-origin: 0 50%;
        z-index: 2;
    }

--> -->

3、用JS旋轉(zhuǎn)兩個(gè)子元素，露出背景圓環(huán)

DIV + CSS3 實(shí)現(xiàn)圓環(huán)進(jìn)度條

SVG

這個(gè)原理也很簡(jiǎn)單，是利用SVG的stroke和dash-array屬性來實(shí)現(xiàn)，也是我常用的實(shí)現(xiàn)方式。

繪制一個(gè)圓環(huán)路徑，填充灰色圓環(huán)

繪制一個(gè)內(nèi)圓環(huán)，半徑/圓心和外圓環(huán)一樣，剛好重疊

設(shè)置內(nèi)圓環(huán)的stroke-dasharray屬性，stroke-dasharray的值得意思是，第一個(gè)值為圓環(huán)第一段填充顏色的長(zhǎng)度，第二個(gè)值為圓環(huán)接下來不填充顏色的長(zhǎng)度，以此類推并重復(fù)。這里設(shè)置為：stroke-dasharray="0,10000" 第一個(gè)值就是填充紅色的值，為0，第二段為不填充的長(zhǎng)度，超過圓環(huán)的周長(zhǎng)即可。此時(shí)進(jìn)度條為0%：

這時(shí)候發(fā)現(xiàn)stroke-dasharray填充是從3點(diǎn)鐘位置開始的，所以就讓內(nèi)圓環(huán)旋轉(zhuǎn)-90度：

.demo2{
    transform-origin: center;
    transform: rotate(-90deg);
}

JS控制內(nèi)圓環(huán)的stroke-dasharray的值來控制內(nèi)圓環(huán)第一段繪制紅色的長(zhǎng)度

var demo2 =  document.querySelector("#J_demo2");
var btn1 = document.querySelector("#J_btn_1");
var btn2 = document.querySelector("#J_btn_2");

var circleLength = Math.floor(2 * Math.PI * demo2.getAttribute("r"));

window.onload = rotateCircle;

btn2.onclick = rotateCircle;
function rotateCircle () {
    var val = parseFloat(btn1.value).toFixed(2);
    val = Math.max(0,val);
    val = Math.min(100,val);
    demo2.setAttribute("stroke-dasharray","" + circleLength * val / 100 + ",10000");
}

SVG 實(shí)現(xiàn)圓環(huán)進(jìn)度條

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/116421.html

相關(guān)文章

  • 基于vue的svg進(jìn)度條組件

    摘要：基于的簡(jiǎn)單的進(jìn)度條在線在線是什么是一款基于項(xiàng)目二次開發(fā)的組件功能特性零依賴體積小目前支持圓環(huán)矩形的進(jìn)度條配置多滿足多樣需求持續(xù)維護(hù)安裝使用詳細(xì)介紹普通模式引入例子詳細(xì)介紹配置參數(shù)進(jìn)度條類型進(jìn)度條的初始值 svg-progress-bar 基于Vue.js的簡(jiǎn)單的svg進(jìn)度條 showImg(https://segmentfault.com/img/remote/146000001282...

    fasss 評(píng)論0 收藏0

  • 利用canvas實(shí)現(xiàn)環(huán)形進(jìn)度條

    摘要：前提有時(shí)候在項(xiàng)目中會(huì)有用到進(jìn)度條的情況，使用也可以實(shí)現(xiàn)，但是對(duì)于性能不好的設(shè)備，或者網(wǎng)絡(luò)不好的情況下，卡頓現(xiàn)象非常明顯，避免出現(xiàn)不流暢的尷尬情況，所以記錄一下，使用來實(shí)現(xiàn)的方法。 前提：有時(shí)候在項(xiàng)目中會(huì)有用到進(jìn)度條的情況，使用css3也可以實(shí)現(xiàn)，但是對(duì)于性能不好的設(shè)備，或者網(wǎng)絡(luò)不好的情況下，卡頓現(xiàn)象非常明顯，避免出現(xiàn)不流暢的尷尬情況，所以記錄一下，使用canvas來實(shí)現(xiàn)的方法。 效果圖...

    zombieda 評(píng)論0 收藏0

  • 利用canvas實(shí)現(xiàn)環(huán)形進(jìn)度條

    摘要：前提有時(shí)候在項(xiàng)目中會(huì)有用到進(jìn)度條的情況，使用也可以實(shí)現(xiàn)，但是對(duì)于性能不好的設(shè)備，或者網(wǎng)絡(luò)不好的情況下，卡頓現(xiàn)象非常明顯，避免出現(xiàn)不流暢的尷尬情況，所以記錄一下，使用來實(shí)現(xiàn)的方法。 前提：有時(shí)候在項(xiàng)目中會(huì)有用到進(jìn)度條的情況，使用css3也可以實(shí)現(xiàn)，但是對(duì)于性能不好的設(shè)備，或者網(wǎng)絡(luò)不好的情況下，卡頓現(xiàn)象非常明顯，避免出現(xiàn)不流暢的尷尬情況，所以記錄一下，使用canvas來實(shí)現(xiàn)的方法。 效果圖...

    Terry_Tai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<