您好!欢迎来到源码码网

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

  • 源码教程
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2024-04-08 09:20
  • 阅读:1011

在网页开发中为了提升网页的交互效果,经常会用到使用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

特别声明:
1、如无特殊说明,内容均为本站原创发布,转载请注明出处;
2、部分转载文章已注明出处,转载目的为学习和交流,如有侵犯,请联系客服删除;
3、编辑非《源码码网》的文章均由用户编辑发布,不代表本站立场,如涉及侵犯,请联系删除;
全部评论(0)
推荐阅读
  • VS Code配置Vue自动补全代码教程
  • VS Code配置Vue自动补全代码教程
  • 在VSCode中配置Vue开发的自动补全代码可以通过以下步骤实现,以提高开发效率:1.安装必要插件Volar(推荐用于Vue3)针对Vue3和语法,提供更强大的支持。Vetur(适用于Vue2)若项目使用Vue2,安装Vetur并禁用Volar以避免冲突。VueVSCodeSnippets提供常用代码片段(如v-for, v-model等)。2.配置VSCode设
  • 源码教程
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2025-04-21 21:35
  • 阅读:127
  • 中文域名有价值吗?他的优缺点是什么?
  • 中文域名有价值吗?他的优缺点是什么?
  • 中文域名(如“例子.中国”或“news.新华网”)作为互联网本地化的重要体现,近年来在特定场景下展现了独特的价值,但也存在争议和局限性。以下从多个角度分析其价值与挑战:1.核心价值点(1)用户友好性与品牌本土化降低记忆门槛:对中文用户而言,母语域名更直观易记,尤其适合面向非英语用户的中小企业、地方机构或中老年群体。例如,“新华网.中国”比“xinhuanet.com”更容易被普通用户记住。强化品牌标识:中文域名可直接体现品牌名称(如“
  • 行业资讯
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2025-04-19 14:08
  • 阅读:124
  • VUE的生命周期
  • VUE的生命周期
  • 在Vue.js中,生命周期指的是组件从创建到销毁过程中,各个阶段的钩子函数(hooks)。这些钩子函数允许你在组件的不同阶段执行代码,例如组件的创建、挂载、更新、销毁等。Vue提供了多个生命周期钩子,使得开发者能够在组件的生命周期的各个阶段插入自定义逻辑。以下是Vue2.x中常见的生命周期钩子:创建阶段:beforeCreate:在实例初始化之后,数据观测(dataobserver)和event/watcher事件配置之前被
  • 源码教程
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2025-04-07 18:08
  • 阅读:143
联系客服
源码代售 源码咨询 素材咨询 联系客服
029-84538663
手机版

扫一扫进手机版
返回顶部