一款蓝色底世界地图为背景的产品介绍数字统计数字动画,自定义数值页面滚动到设置的高度数字滚动特效。适用于产品业务数字滚动特效。使用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');
}
});