Question

我得到了从0到特定数字的计数器。现在我需要激活计数器，当它在屏幕上可见时（距离屏幕顶部大约10％）。我不知道该怎么做。

<div id="counter">
        <h2 id="counter1">0</h2>
        <i class="seperator"></i>
        <h3>{param_count-title}</h3>
</div>


<script type="text/javascript">
        $({countNum: $('#counter1').text()}).animate({countNum: {param_count-number}}, {
  duration: {param_duration},
  easing:'linear',
  step: function() {
    $('#counter1').text(Math.floor(this.countNum));
  },
  complete: function() {
    $('#counter1').text("{param_count-number}");
  }
});

Answer 1

演示： http://so.devilmaycode.it/how-to-trigger-counter-when-become-visible-on-the-screen

你需要一点点CSS：

    #counter {
        top: -20%;
        left: 0;
        position: absolute;
        opacity: 0
    }

那么Javascript部分就像：

    $('#counter').animate({
        top: '20%',
        opacity: 1
    }, 1000, function () {
        // YOUR CODE HERE
        var from = parseInt($('#counter h2').text()),
            to = $('#counter h3').text().length;
        $({
            countNum: from
        }).animate({
            countNum: to
        }, {
            duration: 1000,
            easing: 'linear',
            step: function () {
                $('#counter h2').text(Math.floor(this.countNum));
            },
            complete: function () {
                $('#counter h2').text("{param_count-number}");
            }
        });
        // EOF YOUR CODE
    });

如何在屏幕上显示时触发计数器？

1 个答案: