如果屏幕尺寸改變，如何改變圓圈的大小？
[英]How to change size of the circles if the screen size changed?
問題描述
我在互聯網上看到了一個代碼，我試圖根據屏幕大小改變圓圈的大小，我試圖將整個 JS 代碼放在 if 語句和我在網站上看到的 function 中，它有效但它需要縮放后刷新頁面，那么是否可以通過改變屏幕大小來改變圓圈的大小？ 我的代碼來自： 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>
4 個解決方案
解決方案1
1 2020-04-03 13:17:31
改變大小：
工作代碼：
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>
解決方案2
1 已采納 2020-04-03 13:38:59
我不會專注於質量，@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>
解決方案3
0 2020-04-03 13:05:38
您可以在“resize”上添加一個 eventListener：
document.addEventListener("resize", handleResize);
然后在handleResize中改變大小。 我不確定您為什么不使用 CSS 媒體查詢而不是 javascript 。
解決方案4
0 2020-04-03 13:12:20
將此添加到您的 css
@media only screen and (max-width: 600px) {
.circle {
width: 50%;
}
}
如何更改圓圈的大小？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.