如何通过progressbar插件逆时针旋转饼图？

问题描述 投票：1回答：1

我在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文件，包括这些代码。可以看出，最初的饼图是顺时针旋转的。我只需要让它们逆时针旋转。这看起来很简单，但遗憾的是我无法在数小时内完成这项工作。任何帮助或建议将非常感激！谢谢！！

编辑：请注意，不应更改动画的起点（原点），应从顶部（北）开始。

javascript jquery html css jquery-plugins
1个回答
1
投票

你应该首先将你的旋转值乘以它的负值; -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);
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.