页面下拉数字动态滚动

3358

QQ截图20170603135830.png

HTML

使用先将 number.js引入:点击下载number.js

<ul>
  <li><p><strong><span class="timer" id="count-number" data-to="28850" data-speed="1500">28850</span></strong><span class="text-span">累计服务网站</span></p></li>
  <li><p><strong><span class="timer" id="count-number" data-to="376" data-speed="1500">376</span><em>+</em></strong><span class="text-span">覆盖城市</span></p></li>
  <li><p><strong><span class="timer" id="count-number" data-to="10" data-speed="1500">10</span><em>年</em></strong><span class="text-span">网站原创经验</span></p></li>
  <li><p><strong><span class="timer" id="count-number" data-to="78" data-speed="1500">78</span><em>款</em></strong><span class="text-span">网站产品</span></p></li>
</ul>
JS:
<script type="text/javascript">
    var wrapTop = $(".aboutus-top").offset().top;
var istrue = true;
$(window).on("scroll",function() {
    var s = $(window).scrollTop();
    if (s > wrapTop - 500 && istrue) {
        $(".timer").each(count);
        function count(a) {
            var b = $(this);
            a = $.extend({},
            a || {},
            b.data("countToOptions") || {});
            b.countTo(a)
        };
        istrue = false;
    };
})
</script>