无法更改数据百分比标记（％）jquery进度条cercle的大小

时间：2017-07-05 12:26:08

标签： javascript jquery html css

我正在开发一个需要循环进度条的项目。我想更改数据百分比（％）标记大小，我尝试使用％标签，但不工作，我该如何更改它？我正在使用本教程Jquery Progress bar 

(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);

 $(".progress-bar").loading()
.progress-bar {
  display: block;
  margin: 0 auto;
  text-align: center;
  height: 0px;
  width: 200px;
  font-size: 12px;
  font-family: sans-serif;
  line-height: 20px;
  color: #fff;
  margin-top: 55px;
  background-color: white;
}

.progress-bar div {
  position: absolute;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  text-align: center;
  margin-top: -52px;
  margin-left: -27px;
}

.progress-bar data-percen {
  font-size: 8px;
}

.progress-bar div span {
  position: absolute;
  font-family: sans-serif;
  font-size: 60px;
  line-height: 175px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 183px;
  width: 185px;
  left: 8.5px;
  top: 8.5px;
  text-align: center;
  border-radius: 50%;
  background-color: #f9f7f7;
  color: black;
}

.progress-bar .background {
  background-color: #b3cef6;
}

.progress-bar .rotate {
  clip: rect(0 100px 200px 0);
  background-color: #4b86db;
}

.progress-bar .left {
  clip: rect(0 100px 200px 0);
  opacity: 1;
  background-color: #b3cef6;
}

.progress-bar .right {
  clip: rect(0 100px 200px 0);
  transform: rotate(180deg);
  opacity: 0;
  background-color: #4b86db;
}

@keyframes toggle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar" data-percent="48" data-duration="1000" data-color="#6a6f77,#5fb756">

</div>

1 个答案:

答案 0 :(得分：0)

span的位置为absolute，是构成圆心的元素。

为百分号指定第二个span，
像这样：<span>' + opts.percent + '</span><span>%</span>并不是个坏主意...
但你必须稍微使用CSS。

在下面的代码段中，请注意我通过删除定义.progress-bar div span和font-size的两行来更改background-color。

现在必须将这些内容应用于span。

所以我制作了两个新的CSS规则：.progress-bar div span:nth-of-type(1)和.progress-bar div span:nth-of-type(2)。

第二个为你的百分号签名。

＆＃13;
＆＃13; 
(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><span>%</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);

$(".progress-bar").loading()
＆＃13; 
.progress-bar {
  display: block;
  margin: 0 auto;
  text-align: center;
  height: 0px;
  width: 200px;
  font-size: 12px;
  font-family: sans-serif;
  line-height: 20px;
  color: #fff;
  margin-top: 55px;
  background-color: white;
}

.progress-bar div {
  position: absolute;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  text-align: center;
  margin-top: -52px;
  margin-left: -27px;
}

.progress-bar data-percen {
  font-size: 8px;
}

.progress-bar div span {
  position: absolute;
  font-family: sans-serif;
  /*font-size: 60px;*/
  line-height: 175px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 183px;
  width: 185px;
  left: 8.5px;
  top: 8.5px;
  text-align: center;
  border-radius: 50%;
  /*background-color: #f9f7f7;*/
  color: black;
}

.progress-bar div span:nth-of-type(1) {
  font-size: 60px;
  background-color: #f9f7f7;
}
.progress-bar div span:nth-of-type(2) {
  font-size: 12px;
  text-align:right;
  padding-right:4em;
}

.progress-bar .background {
  background-color: #b3cef6;
}

.progress-bar .rotate {
  clip: rect(0 100px 200px 0);
  background-color: #4b86db;
}

.progress-bar .left {
  clip: rect(0 100px 200px 0);
  opacity: 1;
  background-color: #b3cef6;
}

.progress-bar .right {
  clip: rect(0 100px 200px 0);
  transform: rotate(180deg);
  opacity: 0;
  background-color: #4b86db;
}

@keyframes toggle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar" data-percent="48" data-duration="1000" data-color="#6a6f77,#5fb756">

</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题