標籤下面的圓形jQuery和CSS

我想百分比的標籤遵循像這樣（橙色）的圓形圖案： enter image description here 標籤下面的圓形jQuery和CSS

觀看演示：http://codepen.io/anon/pen/dsfpb（更改HTML元素的data-attribute看變化）

目前，我正在控制標記的位置，其中包含修剪藍色圓圈的元素的width。我有這個代碼：

if (percentage >= 0 && percentage <= 25) 
    $(this).css('width', 65 + '%'); 
if (percentage > 25 && percentage <= 50) 
    $(this).css('width', 100 + '%'); 
if (percentage > 50 && percentage <= 75) 
    $(this).css('width', 100 + '%'); 
if (percentage > 75 && percentage <= 95) 
    $(this).css('width', 65 + '%'); 
if (percentage > 95 && percentage <= 100) 
    $(this).css('width', 45 + '%');

有沒有一種方法可以改善這種情況？有些百分比看起來不太好（例如嘗試'20％'，'80％'，'0％'）。也許簡化它？我嘗試使用像這樣的循環（不完整）：

var j = 100; 
while (i--) { 
    if (percentage <= 50) { 
    j = j - 2; 
    if (j <= 0) 
     j = 0; 
    } 
}

任何想法？謝謝！

來源

2013-11-22 Alex

而不是重新發明輪子，你有沒有考慮使用插件，如http://anthonyterrien.com/knob/？ – martincarlin87

謝謝，但您的評論與我的要求有什麼關係？該插件允許通過觸摸和鼠標點擊操作圓圈。即使對於那個插件，我也沒有看到位於外圈上的標籤沿着「填充」移動。他在圓圈內部是靜態的。 – Alex

只是認爲它可能會有所幫助。可以通過查看應用於標籤的css來完成您正在查找的內容，並且可以使用回調函數。 – martincarlin87

根據水平和垂直距離圓心的距離來定位數字。當然，實際的hor/ver數字將需要轉換爲相對於圓圈中心包含的元素（）的值。需要對相對於實際圓圈的數字進行一些位置調整，例如圓圈的右側，數字將相對於其左側角落進行定位。這將需要更正位於圓圈左側的數字，否則它們將與圓圈重疊。

一個小型的Flash電影會讓任務變得更容易。

除了定位數字之外，人們可以簡單地將顯示的數字限制爲數十（0,10,20,30 ...），並將數字設置爲透明png（或gif），其中png的總大小爲包含該圓的元素的大小並用作背景圖像。這樣，您只需在需要時調用圖像，而不必擔心放置。

來源

2013-11-23 19:25:34 StrangeDucks

標籤下面的圓形jQuery和CSS

回答

相關問題