我在互聯(lián)網(wǎng)上看到了一段代碼，我試圖根據(jù)屏幕尺寸改變圓圈的大小，我嘗試將整個(gè)JS代碼放在if語句和我在網(wǎng)站上看到的一個(gè)函數(shù)中，它有效，但需要縮放后刷新頁面，那么是否可以隨著屏幕尺寸的變化而改變圓圈的大??？我從以下位置獲取了代碼：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 }) } }); }
1 回答
明月笑刀無情
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超4個(gè)贊
你的問題是你必須添加調(diào)整大小事件監(jiān)聽器，并且true在動(dòng)畫完成時(shí)使動(dòng)畫無效，以便條件可以再次運(yùn)行以調(diào)整圓圈大小，你會(huì)注意到，每當(dāng)您調(diào)整頁面大小時(shí)，它都會(huì)重新動(dòng)畫。
/**
?* 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>
- 1 回答
- 0 關(guān)注
- 166 瀏覽
添加回答
舉報(bào)
0/150
提交
取消