如果屏幕尺寸改变，如何改变圆圈的大小？

Question

我在互联网上看到了一段代码，我试图根据屏幕尺寸改变圆圈的大小，我尝试将整个JS代码放在if语句和我在网站上看到的一个函数中，它有效，但需要缩放后刷新页面，那么是否可以随着屏幕尺寸的变化而改变圆圈的大小？我从以下位置获取了代码：https ://codepen.io/Yago/pen/WNbxjYw/** * index.js * - All our useful JS goes here, awesome! Maruf-Al Bashir Reza */function myFunction(x) {  if (x.matches) { // If media query matches          $(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: 4,          lincCape:'round',          emptyFill:'#d4d4d4',          fill: {            color: '#1F88E9'          },                      size:80        })      }    });  }  // Show animated elements  animateElements();  $(window).scroll(animateElements);});  } else {          $(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: 4,          lincCape:'round',          emptyFill:'#d4d4d4',          fill: {            color: '#1F88E9'          },                      size:150        })      }    });  }

Answer 1

你的问题是你必须添加调整大小事件监听器，并且true在动画完成时使动画无效，以便条件可以再次运行以调整圆圈大小，你会注意到，每当您调整页面大小时，它都会重新动画。

/**

 * index.js

 * - All our useful JS goes here, awesome!

 Maruf-Al Bashir Reza

 */

function myFunction(x) {

  

  let size = 150;

  if (x.matches) {

    // If media query matches

    size = 80;

  }

    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: 4,

              lincCape: "round",

              emptyFill: "#d4d4d4",

              fill: {

                color: "#1F88E9",

              },

              size: size,

            });

          $(this).data("animate", false);

        }

      });

    }

    // Show animated elements

    animateElements();

    $(window).scroll(animateElements);

}

var x = window.matchMedia("(max-width: 700px)");

myFunction(x);

$(window).on("resize", function (e) {

  var x = window.matchMedia("(max-width: 700px)");

  myFunction(x); // Call listener function at run time

});

/**

 * index.scss

 * - Add any styles you want here!

 */

body {

  background: #f5f5f5;

}

.progressbar {

  display: inline-block;

  width: 100px;

  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>

<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>