个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 23:56:32 26 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/

26 4 0
文章推荐： jQuery 单击图像，跳转到选择选项
文章推荐： Jquery 工具工具提示不会消失
文章推荐： jQuery 验证，不检查 keyup
文章推荐： junit - 从命令行运行 JUnit
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com