我用的是github上的一个开源插件，链接如下: https://github.com/yxfanxiao/jQuery-plugin-progressbar
请看下面的代码:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Progress Bar</title>
<link rel="stylesheet" href="jQuery-plugin-progressbar.css">
<script src="jquery-1.11.3.js"></script>
<script src="jQuery-plugin-progressbar.js"></script>
</head>
<body>
<div class="progress-bar position"></div>
<div class="progress-bar position" data-percent="60" data-duration="1000" data-color="#ccc,yellow"></div>
<div class="progress-bar position" data-percent="20" data-color="#a456b1,#12b321"></div>
<input type="submit" value="加载">
<script>
$(".progress-bar").loading();
$('input').on('click', function () {
$(".progress-bar").loading();
});
</script>
</body>
</html>
JS:
;
(function ($) {
$.fn.loading = function () {
var DEFAULTS = {
backgroundColor: '#b3cef6',
progressColor: '#4b86db',
percent: 75,
duration: 2000
};
$(this).each(function () {
var $target = $(this);
var opts = {
backgroundColor: $target.data('color') ? $target.data('color').split(',')[0] : DEFAULTS.backgroundColor,
progressColor: $target.data('color') ? $target.data('color').split(',')[1] : DEFAULTS.progressColor,
percent: $target.data('percent') ? $target.data('percent') : DEFAULTS.percent,
duration: $target.data('duration') ? $target.data('duration') : DEFAULTS.duration
};
// console.log(opts);
$target.append('<div class="background"></div><div class="rotate"></div><div class="left"></div><div class="right"></div><div class=""><span>' + opts.percent + '%</span></div>');
$target.find('.background').css('background-color', opts.backgroundColor);
$target.find('.left').css('background-color', opts.backgroundColor);
$target.find('.rotate').css('background-color', opts.progressColor);
$target.find('.right').css('background-color', opts.progressColor);
var $rotate = $target.find('.rotate');
setTimeout(function () {
$rotate.css({
'transition': 'transform ' + opts.duration + 'ms linear',
'transform': 'rotate(' + opts.percent * 3.6 + 'deg)'
});
},1);
if (opts.percent > 50) {
var animationRight = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-end';
var animationLeft = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-start';
$target.find('.right').css({
animation: animationRight,
opacity: 1
});
$target.find('.left').css({
animation: animationLeft,
opacity: 0
});
}
});
}
})(jQuery);
CSS:
.position {
float: left;
margin: 100px 50px;
}
.progress-bar {
position: relative;
height: 100px;
width: 100px;
}
.progress-bar div {
position: absolute;
height: 100px;
width: 100px;
border-radius: 50%;
}
.progress-bar div span {
position: absolute;
font-family: Arial;
font-size: 25px;
line-height: 75px;
height: 75px;
width: 75px;
left: 12.5px;
top: 12.5px;
text-align: center;
border-radius: 50%;
background-color: white;
}
.progress-bar .background {
background-color: #b3cef6;
}
.progress-bar .rotate {
clip: rect(0 50px 100px 0);
background-color: #4b86db;
}
.progress-bar .left {
clip: rect(0 50px 100px 0);
opacity: 1;
background-color: #b3cef6;
}
.progress-bar .right {
clip: rect(0 50px 100px 0);
transform: rotate(180deg);
opacity: 0;
background-color: #4b86db;
}
@keyframes toggle {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
请注意，您可以从提供的链接下载包含这些代码的 zip 文件。可以看出，最初饼图是顺时针旋转的。我只需要让它们逆时针旋转。这看起来很容易，但不幸的是我几个小时都做不到。任何帮助或建议将不胜感激!谢谢!!
编辑:请注意动画的起点(原点)不应更改，应从顶部(北)开始。
最佳答案
您应该首先将旋转值乘以其负值； -3.6 而不是 3.6。您还必须相应地更新 CSS，否则它将从底部开始动画，这与它从顶部开始的原始版本相反。
您可以通过交换左右组件来欺骗它，但这将影响小于 50% 的进度值，因此您也应该添加一个 else 语句来处理它。
因此最终的 JS 文件如下所示；
JS:
;
(function ($) {
$.fn.loading = function () {
var DEFAULTS = {
backgroundColor: '#f00',
progressColor: '#adadad',
percent: 75,
duration: 2000
};
$(this).each(function () {
var $target = $(this);
var opts = {
backgroundColor: $target.data('color') ? $target.data('color').split(',')[0] : DEFAULTS.backgroundColor,
progressColor: $target.data('color') ? $target.data('color').split(',')[1] : DEFAULTS.progressColor,
percent: $target.data('percent') ? $target.data('percent') : DEFAULTS.percent,
duration: $target.data('duration') ? $target.data('duration') : DEFAULTS.duration
};
$target.append('<div class="background"></div><div class="rotate"></div>'+
'<div class="left"></div>'+
'<div class="right"></div><div class=""><span>' +
+ opts.percent + '%</span></div>');
$target.find('.background').css('background-color', opts.backgroundColor);
$target.find('.left').css('background-color', opts.backgroundColor);
$target.find('.rotate').css('background-color', opts.progressColor);
$target.find('.right').css('background-color', opts.progressColor);
var $rotate = $target.find('.rotate');
setTimeout(function () {
$rotate.css({
'transition': 'transform ' + opts.duration + 'ms linear',
'transform': 'rotateZ(' + -opts.percent * 3.6 + 'deg)'
});
},1);
if (opts.percent > 50) {
var animationRight = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-end';
var animationLeft = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-start';
$target.find('.left').css({
animation: animationRight,
opacity: 1
});
$target.find('.right').css({
animation: animationLeft,
opacity: 0
});
}
else {
var animationRight = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-end';
var animationLeft = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-start';
$target.find('.left').css({
animation: animationRight,
opacity: 0
});
$target.find('.right').css({
animation: animationLeft,
opacity: 1
});
}
});
}
})(jQuery);
关于javascript - 如何通过progressbar插件逆时针旋转饼图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55377985/