countUp.js实现数字滚动效果
本文实例为大家分享了countUp.js数字滚动效果展示的具体代码,供大家参考,具体内容如下
1.概述
1.1说明
在项目过程中,有时候需要动态的去展示一些数据的加载状态,如一个数字为10000,需要5秒时间滚动加载完成。此时使用countup.js就能够很方便的处理此类功能问题。
1.2countup.js
countup.js是一个无依赖性、轻量级的javascript类,可用于快速创建动画,以更有趣的方式显示数字/数据。详见countup.js
1.3countup.js使用
npminstallcountup 进行安装依赖
importCountUpfrom"countup" 在页面中引入
newCountUp(target,startVal,endVal,decimals,duration,options)
参数:
- target:目标元素的id *必填
- startVal:开始的值(从哪个值开始) *必填
- endVal:结束的值(滚动到哪个值结束) *必填
- decimals:小数位数,默认值为0 *可选
- duration:动画持续时间,单位为秒,默认值为2 *可选
- options:选项的可选对象 *可选
useEasing:true --是否使用缓动动画,默认为缓动,可设置为false让其匀速
useGrouping:true--对数字进行分组,如12345,按三位一组变为类似12,345这样的
separator:',' --分组时使用的分隔符默认是逗号
decimal:'.' --小数点
prefix:'' --添加前缀如12345,变为¥12345
suffix:'' --添加后缀如12345通过添加后缀变为12345$,12345元之类的
方法:
暂停/恢复 pauseResume
重置动画 reset
更新值 update(newVal)
2.代码
2.1源代码
varCountUp=function(target,startVal,endVal,decimals,duration,options){ varself=this; self.version=function(){ return"1.9.2" }; self.options={ useEasing:true, useGrouping:true, separator:",", decimal:".", easingFn:easeOutExpo, formattingFn:formatNumber, prefix:"", suffix:"", numerals:[] }; if(options&&typeofoptions==="object"){ for(varkeyinself.options){ if(options.hasOwnProperty(key)&&options[key]!==null){ self.options[key]=options[key] } } } if(self.options.separator===""){ self.options.useGrouping=false }else{ self.options.separator=""+self.options.separator } varlastTime=0; varvendors=["webkit","moz","ms","o"]; for(varx=0;x1?self.options.decimal+x[1]:""; if(self.options.useGrouping){ x3=""; for(i=0,l=x1.length;i self.endVal); self.frameVal=self.startVal; self.initialized=true; returntrue }else{ self.error="[CountUp]startVal("+startVal+")orendVal("+endVal+")isnotanumber"; returnfalse } }; self.printValue=function(value){ varresult=self.options.formattingFn(value); if(self.d.tagName==="INPUT"){ this.d.value=result }else{ if(self.d.tagName==="text"||self.d.tagName==="tspan"){ this.d.textContent=result }else{ this.d.innerHTML=result } } }; self.count=function(timestamp){ if(!self.startTime){ self.startTime=timestamp } self.timestamp=timestamp; varprogress=timestamp-self.startTime; self.remaining=self.duration-progress; if(self.options.useEasing){ if(self.countDown){ self.frameVal=self.startVal-self.options.easingFn(progress,0,self.startVal-self.endVal,self.duration) }else{ self.frameVal=self.options.easingFn(progress,self.startVal,self.endVal-self.startVal,self.duration) } }else{ if(self.countDown){ self.frameVal=self.startVal-((self.startVal-self.endVal)*(progress/self.duration)) }else{ self.frameVal=self.startVal+(self.endVal-self.startVal)*(progress/self.duration) } } if(self.countDown){ self.frameVal=(self.frameVal self.endVal)?self.endVal:self.frameVal } self.frameVal=Math.round(self.frameVal*self.dec)/self.dec; self.printValue(self.frameVal); if(progress self.endVal); self.rAF=requestAnimationFrame(self.count) }; if(self.initialize()){ self.printValue(self.startVal) } };
2.1代码示例
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。