javascript - 使 View 中的动画功能更加灵活

当滚动到视图中时，我有一些代码可以使几个数字动起来。一切正常。但是，当前它仅适用于一组数字并绑定到一个div（带有ID）。我想使它变得更灵活，使其可以处理超过1组数字.DIV ID可以是counter1，counter2，counter3等。

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

这是笔：
https://codepen.io/anon/pen/bQWpjJ

感谢您的帮助！

最佳答案

也许您可以通过先使用$('#counter1, #counter2').each( .. )遍历每个计数器来修改实现。

在每次迭代的内部，您可以通过为该计数器实例设置一个window.scroll()处理程序来有效地重用现有代码。

您还将在迭代内移动var a = 0，以便您的代码跟踪此计数器实例的唯一滚动偏移量。

最后，您需要确保为迭代的当前'.counter-value'实例选择counter元素：

$('#counter1, #counter2').each(function() {

  var a = 0;
  var counter = $(this);

  $(window).scroll(function() {

    var oTop = counter.offset().top - window.innerHeight;

    if (a == 0 && $(window).scrollTop() > oTop) {

      $('.counter-value', counter).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);
            }

          });
      });

      a = 1;
    }

  });

})

.spacing {
  width:100%;
  height: 1280px;
  position:relative;
}
.counter {text-align:center}
.counter-value {display:inline-block; padding:20px 40px; margin:0 20px; border:1px solid #ddd; font-family:Arial; font-size:50px; font-weight:bold}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="spacing"></div>
<div id="counter1">
    <div class="counter-value" data-count="300">0</div>
    <div class="counter-value" data-count="400">100</div>
    <div class="counter-value" data-count="1500">200</div>
</div>
<div class="spacing"></div>

<div id="counter2">
    <div class="counter-value" data-count="500">100</div>
    <div class="counter-value" data-count="600">200</div>
    <div class="counter-value" data-count="1700">300</div>
</div>
<div class="spacing"></div>

这是working codepen-希望对您有所帮助！