文章詳情頁(yè)
如何實(shí)現(xiàn)圖中的刻度漸變效果?
瀏覽:111日期:2024-06-10 11:54:01
問(wèn)題描述
問(wèn)題解答
回答1:事先定義好 50 - 100個(gè)漸變顏色(不斷加深的)
根據(jù)當(dāng)前的刻度位置,進(jìn)行顏色填充,例如:當(dāng)前刻度偏移量為:80px,那么,你需要設(shè)置一個(gè)刻度的寬度(w),刻度與刻度之間的距離(m),設(shè)需填充的 刻度數(shù)量為 n(未知,需求解),則間距有 n - 1 個(gè),那么可得方程式:w * n + m * (n + 1) = 80 ,求出 n 為多少
進(jìn)行填充
// 事先預(yù)定義的顏色集合var colorList = [red , blue , green .....];// 刻度集合var list = document.getElementByClassName('scale');for (var i = 0; i
相關(guān)文章:
1. angular.js - $stateChangeSuccess事件在狀態(tài)跳轉(zhuǎn)的時(shí)候不執(zhí)行?2. 如何解決docker宿主機(jī)無(wú)法訪問(wèn)容器中的服務(wù)?3. python - Scrapy存在內(nèi)存泄漏的問(wèn)題。4. java - 三位二進(jìn)制表示8進(jìn)制,四位二進(jìn)制表示16進(jìn)制,那么多少二進(jìn)制表示10進(jìn)制呢?5. 如何用筆記本上的apache做微信開(kāi)發(fā)的服務(wù)器6. javascript - 螞蟻金服里的react Modal方法,是怎么把元素插入到頁(yè)面最后的7. CSS3 畫(huà)如下圖形8. android - rxjava merge 返回Object對(duì)象數(shù)據(jù)如何緩存9. java如何生成token?10. angular.js - ionic2 瀏覽器跨域問(wèn)題
排行榜

熱門標(biāo)簽