countup.js實現(xiàn)數(shù)字動態(tài)疊加效果
更新時間：2019年10月17日 15:50:04 作者：馬優(yōu)晨
這篇文章主要為大家詳細介紹了countup.js實現(xiàn)數(shù)字動態(tài)疊加效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了countup.js實現(xiàn)數(shù)字動態(tài)疊加效果的具體代碼，供大家參考，具體內(nèi)容如下
CountUp.js 無依賴的、輕量級的 JavaScript 類，可以用來快速創(chuàng)建以一種更有趣的動畫方式顯示數(shù)值數(shù)據(jù)。盡管它的名字叫 countUp，但其實可以在兩個方向進行變化，這是根據(jù)你傳遞的 startVal 和 endVal 參數(shù)判斷的。 再加上滾輪事件判斷。
可配置的參數(shù)：
- target = 目標元素的 ID；
- startVal = 開始值；
- endVal = 結(jié)束值；
- decimals = 小數(shù)位數(shù)，默認值是0；
- duration = 動畫延遲秒數(shù)，默認值是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
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹Javascript+CSS3實現(xiàn)進度條效果，可以實現(xiàn)給用戶一個等待的過程，有需要的可以了解一下。2016-10-10
最近在使用Cookies加密保存數(shù)據(jù)的時候，接觸到crypto，使用還算簡單，在這里記錄一下2020-08-08
使用three.js實現(xiàn)炫酷的酸性風(fēng)格3D頁面效果
本文內(nèi)容主要介紹，通過使用React+three.js技術(shù)棧，加載3D模型、添加3D文字、增加動畫、點擊交互等，配合樣式設(shè)計，實現(xiàn)充滿設(shè)計感的酸性風(fēng)格頁面2021-10-10
JavaScript事件學(xué)習(xí)小結(jié)（三）js事件對象
這篇文章主要介紹了JavaScript事件學(xué)習(xí)小結(jié)（三）js事件對象的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
javascript mouseover、mouseout停止事件冒泡的解決方案
停止事件冒泡在各瀏覽器中已經(jīng)有相應(yīng)的解決方案，但是對于mouseover和mouseout卻顯得力不從心。2009-04-04
這篇文章主要介紹了bootstrap可視化布局入門教程的相關(guān)資料，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09
JavaScript對象與JSON格式的轉(zhuǎn)換及JSON.stringify和JSON.parse的使用方法
這篇文章主要介紹了JavaScript對象與JSON格式的轉(zhuǎn)換及JSON.stringify和JSON.parse的使用方法，JSON是JavaScript表達值和對象的通用數(shù)據(jù)格式，其本質(zhì)就是符合一定規(guī)范的字符串2022-07-07
javascript檢測是否聯(lián)網(wǎng)的實現(xiàn)代碼
這篇文章主要介紹了javascript檢測是否聯(lián)網(wǎng)的實現(xiàn)代碼,需要的朋友可以參考下2014-09-09
數(shù)組去重在我們的前端的面試過程中經(jīng)過會遇到,有一些人可能會想到一兩種,但是數(shù)據(jù)去重的算法真的太多了,下面這篇文章主要給大家介紹了關(guān)于前端數(shù)組去重面試3個小問題的相關(guān)資料,需要的朋友可以參考下2023-01-01
使用weixin-java-miniapp配置進行單個小程序的配置詳解
這篇文章主要介紹了使用weixin-java-miniapp配置進行單個小程序的配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03