一款蓝色底世界地图为背景的产品介绍数字统计数字动画,自定义数值页面滚动到设置的高度数字滚动特效。适用于产品业务数字滚动特效。使用jQuery,数字滚动插件制作完成。

使用说明:  data-to为显示的数值,data-speed为滚动速度,建议和date-to值一样

<span class="timer product-num-nub count-title" data-to="24" data-speed="24">0</span>

方法调用说明  

自定义.product-num-nub类为数字滚动容器

// 自定义格式化示例
$('.product-num-nub').data('', {
    formatter: function (value, options) {
        return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ' ');
    }
});

页面滚动200高度触发事件,默认为timer,页面滚动触发后移除timer增加count-title类名。目的是让数字有一个动画的过程。

$(window).scroll(function() {
    if ($(window).scrollTop() > 200) {//500 根据数字上面的内容 计算高度  滚到此区域 数字开始滚动
        //开始所有的计时器
        $('.timer').each(count);
        $('.count-title').removeClass('timer');
    }
});