countup.js实现数字动态叠加效果
2019-10-18 07:04
4179 查看
本文实例为大家分享了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
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- countUp.js实现数字动态变化效果
- countUp.js 实现数字滚动 动态效果
- CountUp.js实现数字滚动增值效果
- 基于JS实现数字动态变化显示效果附源码
- JS实现搜索框动态效果
- js实现数字变动效果
- JS+CSS实现分类动态选择及移动功能效果代码
- Android数字动态显示,仿支付宝app效果简单的实现。字数从0-x!!!
- JS实现table表格数据排序功能(可支持动态数据+分页效果)
- JS中for循序中延迟加载实现动态效果
- 用table,js实现web动态取数据并实现分页效果
- js实现数字从1动态递增到10
- 利用JS实现动态进度条效果
- js实现动态消息提示框(模仿android系统中toast的效果)
- JS+CSS实现鼠标滑过时动态翻滚的导航条效果
- jquery鼠标滚动数字增加插件---countUp.js
- 利用css和js实现页面的标签效果。(标签个数可以动态变化)
- Vue.js实现按钮的动态绑定效果及实现代码
- Shine.js实现动态阴影效果
- 利用autocomplete.js实现仿百度搜索效果(ajax动态获取后端[C#]数据)