Question

我看到了一个代码，我试图修改圆圈的大小，但是我不知道我可以使用js还是css对其进行更改。是否可以更改它？

完整的代码来自： https://codepen.io/XTn-25/pen/NWqeBaz

hesr是js代码：

/**
 * index.js
 * - All our useful JS goes here, awesome!
 Maruf-Al Bashir Reza
 */

console.log("JavaScript is amazing!");
$(document).ready(function($) {
  function animateElements() {
    $('.progressbar').each(function() {
      var elementPos = $(this).offset().top;
      var topOfWindow = $(window).scrollTop();
      var percent = $(this).find('.circle').attr('data-percent');
      var percentage = parseInt(percent, 10) / parseInt(100, 10);
      var animate = $(this).data('animate');
      if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
        $(this).data('animate', true);
        $(this).find('.circle').circleProgress({
          startAngle: -Math.PI / 2,
          value: percent / 100,
          thickness: 14,
          fill: {
            color: '#1B58B8'
          }
        }).on('circle-animation-progress', function(event, progress, stepValue) {
          $(this).find('div').text((stepValue * 100).toFixed(1) + "%");
        }).stop();
      }
    });
  }

  // Show animated elements
  animateElements();
  $(window).scroll(animateElements);
});

Answer 1

似乎使用this作为依赖项。因此，为了更改圆的大小，您需要添加默认为100的size属性：

    $(this).find('.circle').circleProgress({
      startAngle: -Math.PI / 2,
      value: percent / 100,
      thickness: 14,
      fill: {
        color: '#1B58B8'
      },
      size: 300 // <-- here, the size changes the circle radius
    })

并且为了停止重叠的圆圈，您还需要通过增加width元素的.progressbar来对CSS进行一些修改：

.progressbar {
  display: inline-block;
  width: 300px;
  margin: 25px;
}

因此完整的示例如下所示：

/**
 * index.js
 * - All our useful JS goes here, awesome!
 Maruf-Al Bashir Reza
 */

console.log("JavaScript is amazing!");
$(document).ready(function($) {
  function animateElements() {
    $('.progressbar').each(function() {
      var elementPos = $(this).offset().top;
      var topOfWindow = $(window).scrollTop();
      var percent = $(this).find('.circle').attr('data-percent');
      var percentage = parseInt(percent, 10) / parseInt(100, 10);
      var animate = $(this).data('animate');
      if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
        $(this).data('animate', true);
        $(this).find('.circle').circleProgress({
          startAngle: -Math.PI / 2,
          value: percent / 100,
          thickness: 14,
          fill: {
            color: '#1B58B8'
          },
          size: 300
        }).on('circle-animation-progress', function(event, progress, stepValue) {
          $(this).find('div').text((stepValue * 100).toFixed(1) + "%");
        }).stop();
      }
    });
  }

  // Show animated elements
  animateElements();
  $(window).scroll(animateElements);
});

/**
 * index.scss
 * - Add any styles you want here!
 */

body {
  background: #f5f5f5;
}

.progressbar {
  display: inline-block;
  width: 300px;
  margin: 25px;
}

.circle {
  width: 100%;
  margin: 0 auto;
  margin-top: 10px;
  display: inline-block;
  position: relative;
  text-align: center;
}

.circle canvas {
  vertical-align: middle;
}

.circle div {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
}

.circle strong i {
  font-style: normal;
  font-size: 0.6em;
  font-weight: normal;
}

.circle span {
  display: block;
  color: #aaa;
  margin-top: 12px;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>My New Pen!</title>

  <!--  Styles  -->
  <link rel="stylesheet" href="styles/index.processed.css">
</head>

<body>
  <h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1>
  <div style="width:100%;height:800px;">↓ Scroll down ↓</div>

  <h3>Title (Placeholder)</h3>

  <div class="progressbar" data-animate="false">
    <div class="circle" data-percent="100">
      <div></div>
      <p>Testing</p>
    </div>
  </div>
  <div class="progressbar" data-animate="false">
    <div class="circle" data-percent="30.5">
      <div></div>
      <p>Testing</p>
    </div>
  </div>
  <div class="progressbar" data-animate="false">
    <div class="circle" data-percent="77">
      <div></div>
      <p>Testing</p>
    </div>
  </div>
  <div class="progressbar" data-animate="false">
    <div class="circle" data-percent="49">
      <div></div>
      <p>Testing</p>
    </div>
  </div>
  <div style="width:100%;height:500px;"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
  <script src="scripts/index.js"></script>
</body>

</html>

如何更改圈子的大小？

1 个答案: