Ярлык следующие формы круга JQuery и CSS

Я хочу, чтобы ярлык проценте следовать круговой схеме, как так (оранжевый): enter image description here Ярлык следующие формы круга JQuery и CSS

См демо: http://codepen.io/anon/pen/dsfpb (изменить data-attribute из элемента HTML, чтобы увидеть изменения)

В настоящее время я контролирую положение метки с помощью 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 должны быть преобразованы в значения относительно элемента(), который он содержится в центре круга. Там должны быть какие-то позиционные корректировки мест размещения по отношению к фактическому кругу, потому что, например, с правой стороны круга, цифры будут расположены относительно их левого угла. Это нужно будет исправить для чисел, расположенных на левой стороне круга, иначе они будут перекрывать круг.

Небольшой флеш-фильм сделает задачу намного проще.

Вместо того, чтобы позиционировать цифры, можно просто ограничить числа, отображаемые десятками (0, 10, 20, 30 ...), и сделать числа в прозрачные png (или gif) с общим размером png размер элемента, который содержит круг, и использовать его в качестве фонового изображения. Таким образом, вам нужно только вызвать изображение, когда это необходимо, и не беспокоиться о размещении.

источник

2013-11-23 19:25:34 StrangeDucks

Ярлык следующие формы круга JQuery и CSS

ответ

Смежные вопросы