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

2024-07-29 10:10:33

本文实例为大家分享了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

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

jquery轻量级数字动画插件countUp.js使用详解

CountUp.js是一个无依赖,轻量级的JavaScript"类",可用于快速创建以更有趣的方式显示数字数据的动画. 该JS插件下载地址展示效果: 详细代码示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery轻量级数字动画插件</title>  <
countUp.js实现数字动态变化效果

本文实例为大家分享了countUp.js实现数字动态变化的具体代码,供大家参考,具体内容如下 countUp.js官网:演示地址 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数字增长效果</title> </head> <body> <h1 id="num1&q
CountUp.js数字滚动插件使用方法详解

CountUp.js 是一个轻量级,无依赖的JavaScript类,通过简单的设置就可以达到数字滚动的效果演示地址: countUp.js 可配置项: target = 目标元素的 ID: startVal = 开始值: endVal = 结束值: decimals = 小数位数,默认值是0: duration = 动画延迟秒数,默认值是2: //用法: var options = { useEasing: true, useGrouping: true, separator: ',', de
CountUp.js实现数字滚动增值效果

数据改动的时候,countUp.js进行数值滚动增加的动态效果,供大家参考,具体内容如下这是js文件 // target = id of html element or var of previously selected html element where counting occurs // startVal = the value you want to begin at // endVal = the value you want to arrive at // decimals =
countUp.js实现数字滚动效果

本文实例为大家分享了countUp.js数字滚动效果展示的具体代码,供大家参考,具体内容如下 1. 概述 1.1 说明在项目过程中,有时候需要动态的去展示一些数据的加载状态,如一个数字为10000,需要5秒时间滚动加载完成.此时使用countup.js就能够很方便的处理此类功能问题. 1.2 countup.js countup.js是一个无依赖性.轻量级的javascript类,可用于快速创建动画,以更有趣的方式显示数字/数据.详见countup.js 1.3 countup.js使用 np
countup.js实现数字动态叠加效果

本文实例为大家分享了countup.js实现数字动态叠加效果的具体代码,供大家参考,具体内容如下 CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 startVal 和 endVal 参数判断的. 再加上滚轮事件判断. 可配置的参数: target = 目标元素的 ID: startVal = 开始值: endVal = 结束值: decimals
基于JS实现数字动态变化显示效果附源码

先给大家展示下效果,感觉不错,可以参考实现代码,文末附有源码哦. 1.目标以液晶电子表样式,动态变化的在指定元素内显示数字. 目标关键词:动态变化(定时器),指定元素(DOM元素ID),数字(number) 效果:多个页面元素中,均以动态效果显示不同的数字,可正可负.并动态改变至少一个元素内的数据. 2.基本原理 (1) 液晶电子表样式,找一种液晶电子表字体即可,无须使用别的绘制技巧. (2) 动态变化则通过使用定时器任务来完成,动态显示要确保变化足够的时长,因此,步长需要根据变化量来进行计
JS表格的动态操作完整示例

本文实例讲述了JS表格的动态操作.分享给大家供大家参考,具体如下: <html> <head> <title>js-表格的动态操作</title> <meta charset="UTF-8"/> <style type="text/css"> #ta tr{ height: 20px; } #t1{ font-weight: bold; /*align-content: center;*/ /*
vue 使用async写数字动态加载效果案例

父组件 <interval-number :number-content="blockHeight" v-if="blockHeight>0"></interval-number> import IntervalNumber from './IntervalNumber.vue' components:{ IntervalNumber, } 子组件 <template> <span class="Interv
JS把内容动态插入到DIV的实现方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-

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

相关推荐

随机推荐