Question

我已经在我的网站上使用了JavaScript，但是现在需要在滚动期间显示每个统计信息时分别触发它。当前，所有数字都在同一时间进行累加，但是我需要更改脚本才能对我在网站上拥有的每个数字分别实现“累加”动画。 HERE是原始密码笔的链接，下面是我从那支笔使用的脚本。

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;
}

});

Answer 1

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

$(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);
          }
        }
      );
    }
  });
});

在页面滚动期间分别触发一个数字计数器的多个实例

1 个答案: