时间戳

首页 > 解决方案 > 在页面滚动期间单独触发一个数字计数器的多个实例

javascript - 在页面滚动期间单独触发一个数字计数器的多个实例

问题描述

我已经让 JavaScript 在我的网站上为此工作，但现在需要在滚动期间显示每个统计信息时单独触发它。目前，所有数字同时计数，但我需要更改脚本以便为我网站上的每个数字单独实现“计数”动画。这里是原始代码笔的链接，下面是我从那支笔使用的脚本。

var a = 0;
$(window).scroll(function() {

var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
  var $this = $(this),
    countTo = $this.attr('data-count');
  $({
    countNum: $this.text()
  }).animate({
      countNum: countTo
    },

    {

      duration: 2000,
      easing: 'swing',
      step: function() {
        $this.text(Math.floor(this.countNum));
      },
      complete: function() {
        $this.text(this.countNum);
        //alert('finished');
      }

    });
});
a = 1;
}

});

标签： javascriptscroll

解决方案

您的持续时间应取决于 countTo 变量，例如duration: countTo * 50,Adjust 以获得所需的结果。

$(window).scroll(function() {
  $('.counter-value').each(function() {
    var contentTop = $(this).offset().top - window.innerHeight;
    if ($(window).scrollTop() > contentTop) {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate(
        {
          countNum: countTo
        },
        {
          duration: countTo * 50,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
          }
        }
      );
    }
  });
});

推荐阅读