上代码:

; (function() {
var pieRight = $('.pieRight'); //右边的半圆
var pieLeft = $('.pieLeft'); //左边的半圆
var h1 = $('.pie h1'); //百分比数字
var deg = 60; //旋转角度
var time = 3000; //旋转时间 毫秒
var sec = time / deg; //速度值
var i = 0; //临时变量 用来存储百分比数字

//角度小于一半 则 时间减半
if (deg < 50) { time = (time / 2); sec = time / deg; } //turn代表圈 1 turn 就是一圈 $('.pies').css({ 'transition': 'transform ' + time + 'ms linear', 'transform': 'rotate(.' + deg + 'turn)' }); //百分比效果定时器 var times = setInterval(function() { //递增百分比数字 并赋值 i++; h1.html(i + '%'); //核心思路: //角度超过一半时 将右边的半圆层级+1 并隐藏左边的半圆 //有个bug 速度过快或过慢时会有闪动出现(目前还没有解决思路) if (deg > 50 && i == 50) {
pieRight.addClass('up');
pieLeft.addClass('hide');
}

//达到目标角度 清除定时器
if (i >= deg) {
clearInterval(times);
}

},
sec);

})()

查看实例:饼图动画实例
下载源码:下载源码

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Captcha Code