countup.js实现数字动态叠加效果


Posted in Javascript onOctober 17, 2019

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

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><span
 ref='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>

演示地址:countUp.js

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js parentElement和offsetParent之间的区别
Mar 23 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
vue实现简单实时汇率计算功能
Jan 15 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
angularjs自定义过滤器demo示例
Aug 24 Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 #Javascript
vue-devtools的安装和使用步骤详解
Oct 17 #Javascript
express中static中间件的具体使用方法
Oct 17 #Javascript
在Express中提供静态文件的实现方法
Oct 17 #Javascript
微信小程序一周时间表功能实现
Oct 17 #Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 #Javascript
JS工厂模式开发实践案例分析
Oct 17 #Javascript
You might like
php explode函数实例代码
2012/02/27 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
Python切换pip安装源的方法详解
2016/11/18 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
Python对列表的操作知识点详解
2019/08/20 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
档案管理员岗位职责
2013/12/01 职场文书
消防安全检查制度
2014/02/04 职场文书
难忘的一课教学反思
2014/04/30 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
品酒会策划方案
2014/05/26 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
重阳节活动总结
2014/08/27 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
python获取带有返回值的多线程
2022/05/02 Python