Question

我只在一页上有径向条。此外，我还使用了一些函数来检查视图中的元素。我将此函数用于页面上的其他元素。我的径向用背景图像渐变制作，确定在这里使用svg，我从不使用svg作为径向条。我需要在进入视口时使用百分比为进度条设置动画。我有svg径向按钮的例子，在我的视口检查功能里面的新端口中，最好用它作为回调函数吗？ radial svg codepen codepen

<div class="container">
  <div class="item progress-42">
    <div class="radial-inner-bg"><span>42%</span></div>
  </div>
  <div class="item progress-33">
    <div class="radial-inner-bg"><span>33%</span></div>
  </div>
  <div class="item progress-20">
    <div class="radial-inner-bg"><span>20%</span></div>
  </div>
  <div class="item progress-95">
    <div class="radial-inner-bg"><span>95%</span></div>
  </div>
  <div class="item progress-85">
    <div class="radial-inner-bg"><span>85%</span></div>
  </div>
  <div class="item progress-70">
    <div class="radial-inner-bg"><span>70%</span></div>
  </div>
</div>



function isElementInViewport(elem) {
  var $elem = $(elem);
  // Get the scroll position of the page.
  var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
  var viewportTop = $(scrollElem).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  // Get the position of the element on the page.
  var elemTop = Math.round($elem.offset().top);
  var elemBottom = elemTop + $elem.height();
  return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}
// Check if it's time to start the animation.
function checkAnimation() {
  var $elem = $('.vc-key-figures-item--circle');
  var $newsArrowRight = $('.news-link .icon-slim-right');
  // If the animation has already been started
  if ($elem.hasClass('grow-js')) return;
  if (isElementInViewport($elem)) {
    // Start the animation
    $elem.addClass('grow-js');
  }
  $.each($newsArrowRight, function() {
    var element = $(this);
    if (element.hasClass('fade-in-right-js')) return;
    if (isElementInViewport(element)) {
      element.addClass('fade-in-right-js');
    }
  });
}
// Capture scroll events
$(window).scroll(function() {
  checkAnimation();
});

Answer 1

我合并了两个脚本，现在所有工作都正确检查codepen solution。我需要建议如何优化我的代码，并使用最佳实践？

(function($) {

    var forEach = function(array, callback, scope) {
        for (var i = 0; i < array.length; i++) {
            callback.call(scope, i, array[i]);
        }
    };

    var radialBarAnimate = function() {
        var max = -219.99078369140625;
        forEach(document.querySelectorAll('.progress'), function(index, value) {
            percent = value.getAttribute('data-progress');
            progressValue = value.getAttribute('data-progress-value');
            fill = value.querySelector('.fill');
            if (fill.hasAttribute("style")) return;
            if (isElementInViewport(fill)) {
                fill.setAttribute('style', 'stroke-dashoffset: ' + ((100 - percent) / 100) * max);
                value.querySelector('.value').innerHTML = progressValue;
            }
        });
    }

    function isElementInViewport(elem) {
        var $elem = $(elem);
        // Get the scroll position of the page.
        var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
        var viewportTop = $(scrollElem).scrollTop();
        var viewportBottom = viewportTop + $(window).height();
        // Get the position of the element on the page.
        var elemTop = Math.round($elem.offset().top);
        var elemBottom = elemTop + $elem.height();
        return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
    }
    // Check if it's time to start the animation.
    function checkAnimation() {
        radialBarAnimate();
    }
    // Capture scroll events
    $(window).scroll(function() {
        checkAnimation();
    });

})(jQuery);

径向条动画到视口中

1 个答案: