countUp.js-数字滚动效果（简单基础使⽤）
  最近写了个移动端宣传页，⾥⾯有数字的效果，所以有使⽤到countUp.js。
  以下内容有包括：h5页⾯countUp.js的引⼊和实例、参数说明、事件简单使⽤和描述、countUp.js源代码。
效果
重点部分-参数
h5页⾯代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.content{
html滚动效果代码
text-align: center
}
</style>
<script src="./js/countUp.js"></script>
</head>
<body>
<div class="content">数字⼀：<span id="num1"></span></div>
<div class="content"><button onclick="start()">开始</button><button onclick="pause()">暂停</button><button onclick="reset()">重置</button><button onclick="updata()">更新值</button></div>
<div class="content">数字⼆：<span id="num2"></span></div>
</body>
<script>
var options={
useEasing: true,  // 过渡动画效果，默认ture
useGrouping: true,  // 千分位效果，例：1000->1,000。默认true
separator: ',',  // 使⽤千分位时分割符号
decimal: '.',  // ⼩数位分割符号
prefix: '',    // 前置符号
suffix: ''    // 后置符号，可汉字
}
// target,startVal,endVal,decimals,duration,options
// dom节点, 初始值,  结束值, ⼩数位数, 过渡⼏秒 , 初始参数
var num1 = new CountUp('num1', 0, 100, 0, 2,options),
num2 = new CountUp('num2', 0, 200, 0, 2,options)
function start(){
// 开始
num1.start()
}
function pause(){
// 暂停或继续
num1.pauseResume()
}
function reset(){
// 重置初始值
}
function updata(){
// 重新赋值
num1.update(888)
}
</script>
</html>
countUp.js
var CountUp=function(target,startVal,endVal,decimals,duration,options){var self=this;self.version=function(){return"1.9.2"};self.options={useEasing:true,useGrouping:true,separator:",",decimal:".",easingFn:easeOutExpo,formattingFn:formatNumbe  　

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。