使用countup.js使数字动态叠加

CountUp.js 无依赖的、轻量级的 JavaScript 类，可以用来快速创建以一种更有趣的动画方式显示数值数据。尽管它的名字叫 countUp，但其实可以在两个方向进行变化，这是根据你传递的 startVal 和 endVal 参数判断的。再加上滚轮事件判断……

可配置的参数：

target = 目标元素的 ID；
startVal = 开始值；
endVal = 结束值；
decimals = 小数位数，默认值是0；
duration = 动画延迟秒数，默认值是2；

举例：


var options = {useEasing: true, useGrouping: true, separator: ',', decimal: '.',
};
var demo = new CountUp('myTargetElement', 0, 4068, 0, 2.5, options);
if (!demo.error) {demo.start();
} else {console.error(demo.error);
}

安装：

npm i countup.js

在vue中使用：

<template><h1><spanref='countup'class="text"></span></h1>
</template><script>
import { CountUp } from 'countup.js'
export default {name: 'Countup',data () {return {options: {startVal: 1000},endCount: 2019}},mounted () {this.initCountUp()},methods: {initCountUp () {let demo = new CountUp(this.$refs.countup, this.endCount, this.options)if (!demo.error) {demo.start()} else {console.error(demo.error)}}}
}
</script><style lang="less" scoped>
.text {color: #4d63bc;font-size: 16px;
}
</style>

演示地址：

http://inorganik.github.io/countUp.js/

使用countup.js使数字动态叠加相关推荐

CountUp.js – 让数字以非常有趣的动画方式显示
CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...
js实现数字动态递增效果
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>js ...
h5 数字变化_基于JS实现数字动态变化显示效果附源码
先给大家展示下效果,感觉不错,可以参考实现代码,文末附有源码哦. 1.目标以液晶电子表样式,动态变化的在指定元素内显示数字. 目标关键词:动态变化(定时器),指定元素(DOM元素ID),数字(num ...
Js实现数字动态滚动效果
生成gif后有点卡顿,实际上是很流畅的. 完整代码如下 DOM <!DOCTYPE html> <html> <head><title></tit ...
数字滚动插件——CountUp.js
CountUp.js数字滚动插件使用方法详解 CountUp.js 是一个轻量级,无依赖的JavaScript类,通过简单的设置就可以达到数字滚动的效果演示地址: http://inorganik. ...
jquery轻量级数字动画插件 —— countUp.js
CountUp.js是一个无依赖,轻量级的JavaScript"类",可用于快速创建以更有趣的方式显示数字数据的动画. 该JS插件下载地址:https://github.com/i ...
js实现数字从1动态递增到10
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>js ...
JavaScript巧用Object的get和set方法实现js变量的动态监听
javascript 面向对象系列更新: Javascript面向对象编程之工厂模式.构造函数和ES6的class类 JavaScript 面向对象之Object的getter和setter的使用更 ...
百度地图API首页数字动态改变特效jquery特效
百度地图API首页数字动态改变特效百度地图首页板块代码片段html 百度地图首页板块 1.昨天做网站领导需要一个浏览器窗口滚动到当前位置数字开始变动到指定位置,现在我把代码分享给大家. 代码片段h ...

使用countup.js使数字动态叠加

使用countup.js使数字动态叠加相关推荐

最新文章

热门文章