javascript - 使功能在 View 中更灵活时进行动画处理

Question

我有一些代码可以在滚动到 View 中时为几个数字设置动画。一切正常。但是，目前它仅适用于一组数字并绑定(bind)到一个 div(带有 id)。我想让它变得更加灵活，使其适用于多于一组数字。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

谢谢你的帮助!

Answer 1

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

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

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

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

$('#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 - 希望对您有所帮助!