成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

環(huán)形百分比控件iantoo.percent()

impig33 / 3081人閱讀

摘要：模塊最終使用方法進(jìn)行查找并自動(dòng)添加為查找。百分比文字樣式非必填默認(rèn)。百分比文字大小會(huì)通過的值自動(dòng)計(jì)算百分?jǐn)?shù)的數(shù)字并添加百分號(hào)。百分比文字現(xiàn)實(shí)的顏色。

原文鏈接 使用

引入文件:

./build/js/iantooPercent.js

并在頁面執(zhí)行

 


該模塊不依賴任何三方模塊，并于iantoo系列其它功能可同時(shí)存在。

兼容性

所有支持canvas的瀏覽器均支持該模塊


可以參考canvas基本支持屬性

預(yù)覽



iantooPercent

Github
API
el

canvas對(duì)應(yīng)的ID名稱,必填。


模塊最終使用querySelector方法進(jìn)行DOM 查找,并自動(dòng)添加#為id查找。

line

指邊線,也就是背景中的整圓。


line.size


非必填、number,默認(rèn):4


邊線的粗細(xì)。


line.color


非必填、string,默認(rèn):"#D3EDFD"，十六進(jìn)制顏色值。


邊線的顏色。

subject

主要旋轉(zhuǎn)部分的樣式設(shè)置


subject.size


非必填、number,默認(rèn):8。


旋轉(zhuǎn)主線條的粗細(xì)。


subject.color


非必填、string,默認(rèn):"#57C0FD"，十六進(jìn)制顏色值。


旋轉(zhuǎn)的主線條的顏色。


subject.Start_Position


非必填、number,默認(rèn):0，取值:0,1,2,3。


制旋轉(zhuǎn)主線條的開始位置，取值:0,1,2,3 ;按照時(shí)鐘的時(shí)間說明 0代表從00點(diǎn)鐘方向開始; 1代表是3點(diǎn)鐘方向,依此類推 。


subject.percentage


非必填、number,默認(rèn):0，取值:0～1。


旋轉(zhuǎn)的百分比，取值在0～1之間，如果浮點(diǎn)數(shù)在小數(shù)點(diǎn)后三位的數(shù)，不會(huì)進(jìn)行四舍五入，而是通過直接取小數(shù)點(diǎn)后面兩位數(shù)為準(zhǔn)。


subject.content


非必填、string,默認(rèn):"附加文字"


除顯示百分比數(shù)字以外，的附加內(nèi)容顯示文字，將顯示在百分比內(nèi)容下面，此處并未對(duì)傳入字符長度做限制。

perStyle

百分比文字樣式


perStyle.fontSize


非必填、number,默認(rèn):30。


百分比文字大小,會(huì)通過subject.percentage的值自動(dòng)計(jì)算百分?jǐn)?shù)的數(shù)字并添加百分號(hào)。


perStyle.color


非必填、string,默認(rèn):"#EF5A3C"。


百分比文字現(xiàn)實(shí)的顏色。

contentStyle.

附加內(nèi)容的樣式


contentStyle.fontSize


非必填、number,默認(rèn):16。


附加文字內(nèi)容顯示的字體大小


contentStyle.color


非必填、string,默認(rèn):"#77828C"。


附加內(nèi)容的文字顏色。


注：該模塊必須對(duì)canvas標(biāo)簽設(shè)置style的寬高屬性，或者通過class屬性指定寬高。源碼中會(huì)通過獲取canvas的offsetWidth和offsetHeight去重新設(shè)置canvas的width和height屬性，但這并不影響自身style屬性下所對(duì)應(yīng)顯示的大小。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108108.html

相關(guān)文章

  • 利用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

  • 巧妙使用transform實(shí)現(xiàn)環(huán)形路徑平移動(dòng)畫

    摘要：參考環(huán)形路徑平移的方案，做一些調(diào)整，就可以得到型路徑平移的寫法這里初始把元素放在了上面那個(gè)半圓環(huán)的圓心，然后在的關(guān)鍵幀位置切換為下面的半圓環(huán)路徑。 最近在CSS Secrets一書看到了這樣一節(jié)：讓一個(gè)元素沿環(huán)形路徑平移。這是一個(gè)css動(dòng)畫的問題，但卻沒有看上去那么簡單，其關(guān)鍵點(diǎn)是元素是平移的，也就是說，元素自身并不發(fā)生旋轉(zhuǎn)，只是穩(wěn)定地沿著一個(gè)環(huán)形的路徑移動(dòng)，像這樣： showImg(...

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

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

0條評(píng)論

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