countUp.js实现鼠标滑动到某个位置数字自动滚动增加的效果

11月23日 14时37分更新

1400

在网页开发中为了提升网页的交互效果，经常会用到使用js给网页增加一定的特效，下边就来说说使用js实现鼠标滑动到某个位置数字自动滚动增加的效果。其实这种效果有很多中解决办法，自己也可以去写，下边我们借助countUp.js来实现，关于这个js文件，我放在末尾：

<script type="text/javascript">   
        var options = {     
        useEasing: true,      
        useGrouping: true,      
        separator: ',',      
        decimal: '.', 
        };  
         
        var num1 = new CountUp('timer', 0, 2012, 0, 2, options);   
        var num2 = new CountUp('timer1', 0, 5000, 0, 2, options); 
        var num3 = new CountUp('timer2', 0, 800, 0, 2, options); 
             
        var flag = false;
        var scroll = $(".timer").offset().top - window.innerHeight;
        $(window).scroll(function() {
            var height = $(window).scrollTop();
            console.log(height); 
            if (height >= scroll && false === flag) {
                flag = true;
                    if (!num1.error) {    
                        num1.start();  
                    } else {     
                        console.error(num3.error); 
                    }
                     
                    if (!num2.error) {    
                        num2.start();  
                    } else {     
                        console.error(num3.error); 
                    }
                     
                     
                    if (!num3.error) {    
                        num3.start();  
                    } else {     
                        console.error(num3.error); 
                    }
                }
                 
            if (height < scroll) {
                flag = false
            }
        });
    </script>

//timer：目标元素的ID

//0：滚动开始的数字

//2012：滚动结束的数字

//2 ：完成整个效果的时间

countUp.js下载地址：https://cdn.bootcss.com/countup.js/1.9.3/countUp.js

评分

欢迎为Ta评分