部分爲自定義投幣滑塊填充圓圈

我想要設計一個自定義投幣滑塊，在經過由特定硬幣表示的一定範圍的圖像時，硬幣的「填滿」係數應該從0變爲1.說出什麼時候範圍是10張圖片，而我在第3張圖片中，它應該看起來像（填滿的硬幣代表已經穿過的前一個範圍，而空白的那些代表尚未觸及的範圍。左邊是準備在這裏）：部分爲自定義投幣滑塊填充圓圈

enter image description here

如何產生這種圓的圖像？有一些CSS技巧可用嗎？或者用HTML5畫布？

2013-01-11 SexyBeast

這樣做的正常方法是在填充的各個階段使一個圖像具有五個或六個圓圈。顯示屏中的每個硬幣都是使用該精靈作爲背景的自己的圖像，然後使用jQuery依次更改每個硬幣的偏移量以便順序填充硬幣。 – TimD

對。我明白了。謝了哥們。 – SexyBeast

另一種方法是將具有部分白色，部分透明（洞）背景圖像的'div'疊加在具有純色背景的另一個'div'上。「模板」背景圖像可以設置爲「x-repeat」。 – 2013-01-11 21:48:18

如果您想盡可能以css的方式進行操作，您可能需要嘗試設置一堆10個div。如果將邊框半徑設置爲50％，則它們會變爲圓形。然後您將它們全部設置爲選定顏色的邊框

並且如果您將前6個圓圈設置爲特定的類，並將背景顏色關聯到該邊框，則會顯示實心圓。

2013-01-11 21:57:02 vals

回答