Question

请耐心等待我，因为我对jquery＆amp; js一般......

这是我到目前为止所拥有的。 http://jsfiddle.net/hqwxogqt/1/

$(function(){
    var $ppc = $('.progress'),
        percent = parseInt($ppc.data('percent')),
        deg = 360*percent/5;
    if (percent > 2.5) {
        $ppc.addClass('gt-50');
    }
    $('.ss-progress-fill').css('transform','rotate('+ deg +'deg)');
    $('.ss-percent span').html(percent);
});

我实际上在某个地方发现了这个＆amp;能够实现它，但我不知道如何动画它。

我想要做的动画类似于圆形计数器（从1-10开始）在这里工作：awwwards.com

基本上只是让它从0移动到从div元素获得的特定数字。这个数字只需要0-5＆amp;我还想在计数中包含小数，但我无法弄清楚如何。

我尝试使用while循环＆amp;我在网上找到的任何东西似乎都没有用，可能是因为我不知道如何使用它，或者它只适用于我想做的事情。我只是没有选择...... 任何帮助将不胜感激。

Answer 1

这是基本思路：如果您希望它们在设定的时间内设置动画，请计算步长以使其动态化。

＆＃13;

function updatePercentage () {
    
    var elem = $(this);
    var current = elem.data("percent-current") || 0;
    
    var percent = parseFloat(current) + .1;
    var max = parseFloat(elem.data("percent"));
    if (percent > max) {
        percent = max;   
    }
    
    percent = percent.toFixed(1);
    
    deg = 360*percent/5;
    
    elem.data("percent-current", percent);
    
    elem.toggleClass('gt-50', percent > 2.5);
    
    elem.find('.ss-progress-fill').css('transform','rotate('+ deg +'deg)');	
    elem.find('.ss-percent span').html(percent);
    if (percent != max) {
        window.setTimeout( updatePercentage.bind(this), 100);        
    }
}


$(function(){
	var $ppc = $('.progress');
    $ppc.each(updatePercentage);    
});

＆＃13;

.progress {width: 200px; height: 200px; border-radius: 50%; background-color: #E5E5E5; position: relative;}
.progress.gt-50 {background-color: #81CE97;}
.ss-progress {content: ""; position: absolute; border-radius: 50%; left: calc(50% - 100px); top: calc(50% - 100px); width: 200px; height: 200px; clip: rect(0, 200px, 200px, 100px);}
.ss-progress .ss-progress-fill { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 100px); top: calc(50% - 100px);
	width: 200px; height: 200px; clip: rect(0, 100px, 200px, 0); background: #81CE97; transform: rotate(60deg);}
.gt-50 .ss-progress {clip: rect(0, 100px, 200px, 0);}
.gt-50 .ss-progress .ss-progress-fill {clip: rect(0, 200px, 200px, 100px); background: #E5E5E5;}
.ss-percent {content: ""; position: absolute; border-radius: 50%; left: calc(50% - 173.91304px/2); top: calc(50% - 173.91304px/2);
	width: 173.91304px; height: 173.91304px; background: #fff; text-align: center; display: table;}
.ss-percent span {display: block; font-size: 2.6em; font-weight: bold; color: #81CE97;}
.ss-percent-wrapper {display: table-cell; vertical-align: middle;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="progress" data-percent="1">
	<div class="ss-progress">
		<div class="ss-progress-fill"></div>
	</div>
	<div class="ss-percent">
		<div class="ss-percent-wrapper">
			<span>%</span>
		</div>
	</div>
</div>

<div class="progress" data-percent="2.5">
	<div class="ss-progress">
		<div class="ss-progress-fill"></div>
	</div>
	<div class="ss-percent">
		<div class="ss-percent-wrapper">
			<span>%</span>
		</div>
	</div>
</div>

<div class="progress" data-percent="3">
	<div class="ss-progress">
		<div class="ss-progress-fill"></div>
	</div>
	<div class="ss-percent">
		<div class="ss-percent-wrapper">
			<span>%</span>
		</div>
	</div>
</div>

<div class="progress" data-percent="5">
	<div class="ss-progress">
		<div class="ss-progress-fill"></div>
	</div>
	<div class="ss-percent">
		<div class="ss-percent-wrapper">
			<span>%</span>
		</div>
	</div>
</div>

＆＃13;

动画在jquery中的圆形进度条，数字0-10 +小数

1 个答案: