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

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>