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

Question

I saw a code on the internet and i was trying to change the size of the circle according to the screen size, i tried to place the whole JS code in if statement and a function i saw in a website, it worked but it needs to refresh the page after scaling, so is it possible to change the size of circles with changing size of screen?我在互联网上看到了一个代码，我试图根据屏幕大小改变圆圈的大小，我试图将整个 JS 代码放在 if 语句和我在网站上看到的 function 中，它有效但它需要缩放后刷新页面，那么是否可以通过改变屏幕大小来改变圆圈的大小？ I got the code from: https://codepen.io/Yago/pen/WNbxjYw我的代码来自： 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 }) } }); } // Show animated elements animateElements(); $(window).scroll(animateElements): }). } } var x = window.matchMedia("(max-width: 700px)") myFunction(x) // Call listener function at run time x.addListener(myFunction)

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

Answer 1

Vary the size:改变大小：

Working code:工作代码：

 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. $(this).width() / 2 }) $(this),data("animate"; false). // added this, } }) } $(function() { // Show animated elements $(window);on("resize scroll"; animateElements); });

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

Answer 2

I will not concentrate on quality, @mplungjan did a better job with quality but your issue is that you have to add resize event listener and also invalidate the animate true when your animation is done so that the condition can run again to resize the circles, you will notice that this will re-animate whenever you resize the page.我不会专注于质量，@mplungjan 在质量方面做得更好，但你的问题是你必须添加调整大小事件侦听器，并且当你的 animation 完成时动画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 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>

Answer 3

You can add an eventListener on "resize":您可以在“resize”上添加一个 eventListener：

document.addEventListener("resize", handleResize);

And then change the size in handleResize.然后在handleResize中改变大小。 I'm not sure why you don't use CSS media queries instead of javascript though.我不确定您为什么不使用 CSS 媒体查询而不是 javascript 。

Answer 4

add this to your css将此添加到您的 css

@media only screen and (max-width: 600px) {
  .circle {
    width: 50%;
  }
}

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

问题描述

4 个解决方案

解决方案1
1 2020-04-03 13:17:31

解决方案2
1 已采纳 2020-04-03 13:38:59

解决方案3
0 2020-04-03 13:05:38

解决方案4
0 2020-04-03 13:12:20

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

问题描述

4 个解决方案

解决方案1 1 2020-04-03 13:17:31

解决方案2 1 已采纳 2020-04-03 13:38:59

解决方案3 0 2020-04-03 13:05:38

解决方案4 0 2020-04-03 13:12:20

解决方案1
1 2020-04-03 13:17:31

解决方案2
1 已采纳 2020-04-03 13:38:59

解决方案3
0 2020-04-03 13:05:38

解决方案4
0 2020-04-03 13:12:20