在网页开发中为了提升网页的交互效果,经常会用到使用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
联系电话:0763-84538663
联 系 QQ:540383622
工作时间:周一至周五8:00~18:00