javascript - CSS 径向计数器 - 添加另一个圆圈以填充缺失的部分

Question

我正在为民意调查生成圆形计数器，我为每个答案绘制计数器。

我正在使用这个“插件”：http ://blakek.us/labs/jquery/css3-pie-graph-timer/

我有这个输出：

想要的输出：

例子：

http://jsbin.com/iHuXInU/1/edit

http://jsfiddle.net/cvJvB/

我的尝试：

http://jsbin.com/ApUXiTE/1/edit

http://jsfiddle.net/R6j92/

HTML：

  <div class="pollAnswerBar">15</div>
  <br>
  <div class="pollAnswerBar">50</div>
  <br>
  <div class="pollAnswerBar">75</div>

CSS：

.pollAnswerBar {
    position: relative;
    font-size: 50px;
    width:1em;
    height:1em;

}
.pollAnswerBar > .percent {
    position: absolute;
    top: 1.05em;
    left: 0.5em;
    right: 0.5em;
    width: 3.33em;
    font-size: 0.2em;
    text-align: center;
}
.pollAnswerBar > #slice {
    position: absolute;
    width: 1em;
    height: 1em;
    clip:rect(0px,1em,1em,0.5em);
}
.pollAnswerBar > #slice.gt50 {
    clip:rect(auto, auto, auto, auto);
}
.pollAnswerBar > #slice > .pie {
    border-color: red;
    border-width: 0.1em;
    border-style: solid;
    position: absolute;
    width: 0.8em; /* 1 - (2 * border width) */
    height: 0.8em; /* 1 - (2 * border width) */
    clip: rect(0em, 0.5em, 1em, 0em);
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em; 
    border-radius: 0.5em; 
}
.pollAnswerBar > #slice > .pie.fill {
    -moz-transform:rotate(180deg) !important;
    -webkit-transform:rotate(180deg) !important;
    -o-transform:rotate(180deg) !important;
    transform:rotate(180deg) !important;
}

JS：

jQuery(document).ready(function () {

    function drawCounter(percent, element) {
        jQuery(element).html('<div class="percent"></div><div id="slice"' + (percent > 50 ? ' class="gt50"' : '') + '><div class="pie"></div>' + (percent > 50 ? '<div class="pie fill"></div>' : '') + '</div>');
        var deg = 360 * (percent / 100);
        jQuery('#slice .pie', element).css({
            '-moz-transform': 'rotate(' + deg + 'deg)',
                '-webkit-transform': 'rotate(' + deg + 'deg)',
                '-o-transform': 'rotate(' + deg + 'deg)',
                'transform': 'rotate(' + deg + 'deg)'
        });
        jQuery('.percent', element).html(Math.round(percent) + '%');
    }

    jQuery('.pollAnswerBar').each(function (index, element) {
        var percent = jQuery(element).text();
        console.log(percent);
        drawCounter(percent, element);
    });

});

Answer 1

看看这个插件，它好多了： http: //anthonyterrien.com/knob/

Answer 2

将z-index:1规则添加到您的.pollAnswerBar > #slice > .pie选择器

IE

.pollAnswerBar > #slice > .pie {

   border-color: red;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    border-style: solid;
    border-width: 0.1em;
    clip: rect(0em, 0.5em, 1em, 0em);
    height: 0.8em;
    position: absolute;
    width: 0.8em;
    z-index: 1;

}

演示：http: //jsfiddle.net/R6j92/1/