Question

我正在尝试重新创建并更新此fiddle。我能够创建一个单独的图表，但无法实现第二个进展。

第二张图

<div id="radial-progress-vha">
            <div class="circle-vha">
            <div class="mask-vha full-vha">
            <div class="fill-vha"></div>
            </div>
            <div class="mask-vha half-vha">
            <div class="fill-vha"></div>
            <div class="fill-vha fix-vha"></div>
            </div>
            <div class="shadow-vha"></div>
            </div>
            <div class="inset-vha">
            <div class="percentage-vha">22.17</div>
            </div>
       </div>

我的理解是每个图形都应该是唯一的，因此我用不同的名称复制了原始的css。这是where它崩溃了。

js

var transform_styles = ['-webkit-transform', '-ms-transform', 'transform'];
window.randomize = function() {
var rotation = Math.floor((180)*.123);
var fix_rotation = rotation;
for(i in transform_styles) {
    $('.circle .fill, .circle .mask.full').css(transform_styles[i],'rotate(' + rotation + 'deg)');
//$('.circle .mask.left').css(transform_styles[i], 'rotate(' + rotation + 'deg)');
$('.circle .fill.fix').css(transform_styles[i],'rotate(' + fix_rotation + 'deg)');
}
}
setTimeout(window.randomize, 200);
$('#radial-progress-vha');

Answer 1

我有一个工作小提琴：http://jsfiddle.net/uouxcLbd/

您的主要问题是

您无需复制transform-styles
{$ 1}}和$('#radial-progress-va');行是不必要的
$('#radial-progress-vha');的第二个定义需要一个不同的名称
使用带有window.randomize后缀的css类所需的第二个randomize函数
您在CSS中输了一个拼写错误 - 它缺少一个-vha，因此.选择器无法正常工作

多个径向进度图（js）

1 个答案: