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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
基于Vue的延迟加载插件vue-view-lazy
May 21 Javascript
vue中使用props传值的方法
May 08 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
JavaScript实现简单计时器
Jun 22 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
PHP4实际应用经验篇(8)
2006/10/09 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
Python动态加载模块的3种方法
2014/11/22 Python
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
深入理解python对json的操作总结
2017/01/05 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
中秋节超市促销方案
2014/01/30 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
优秀班集体申报材料
2014/12/25 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
小学教师求职信范文
2015/03/20 职场文书
学校节水倡议书
2015/04/29 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
python如何利用cv2模块读取显示保存图片
2021/06/04 Python