本文主要详细介绍countup.js的数字动态叠加效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

本文分享countup.js实现数字动态叠加效果的具体代码，供大家参考。具体内容如下

Up.js是一个无依赖性的轻量级JavaScript类，可以用来快速创建数字数据，并以更有趣的动画方式显示。虽然它的名字叫countUp，但实际上是可以双向改变的，这是根据你传递的startVal和endVal参数来判断的。加上车轮事件判断。

可配置参数：

Target=目标元素的ID；

StartVal=起始值；

EndVal=结束值；

小数=小数位，默认值为0；

时长=动画延迟秒数，默认值为2；

举例：

var选项={

useEasing: true，

useGrouping: true，

分隔符：“，”，

十进制：“.”,

};

var demo=new count up(' myTargetElement '，0，4068，0，2.5，options)；

如果(！演示错误){

demo . start()；

}否则{

console.error(演示.错误)；

安装：

npm i countup.js

用于vue:

模板

h1span

ref='countup '

class='文本'

/span

/h1

/模板

脚本

从“countup.js”导入{ CountUp }

导出默认值{

名称：'计数'，

data () {

返回{

选项：{

起始值：1000

},

截止日期：2019年

}

},

已安装(){

this.initCountUp()

},

方法：{

initCountUp () {

让demo=new CountUp(这个。$refs.countup，this.endCount，this.options)

如果(！演示错误){

demo.start()

}否则{

console.error(演示.错误)

}

}

}

}

/脚本

style lang='less '范围。文本{

颜色：# 4d 63 BC；

字体大小：16px

}

/风格

演讲地址：countUp.js

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。