gpt4 book ai didi

javascript - 如果屏幕尺寸改变,如何改变圆圈的大小?

转载 作者:行者123 更新时间:2023-11-30 23:56:32 27 4
gpt4 key购买 nike

我在互联网上看到了一段代码,我试图根据屏幕尺寸改变圆圈的大小,我尝试将整个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
})
}
});
}

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

最佳答案

我不会专注于质量,@mplungjan 在质量方面做得更好,但你的问题是你必须添加调整大小事件监听器,并在动画完成时使动画 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>

关于javascript - 如果屏幕尺寸改变,如何改变圆圈的大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61012451/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com