countup.js實現(xiàn)數(shù)字動態(tài)疊加效果
更新時間：2019年10月17日 15:50:04 作者：馬優(yōu)晨
這篇文章主要為大家詳細(xì)介紹了countup.js實現(xiàn)數(shù)字動態(tài)疊加效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了countup.js實現(xiàn)數(shù)字動態(tài)疊加效果的具體代碼，供大家參考，具體內(nèi)容如下
CountUp.js 無依賴的、輕量級的 JavaScript 類，可以用來快速創(chuàng)建以一種更有趣的動畫方式顯示數(shù)值數(shù)據(jù)。盡管它的名字叫 countUp，但其實可以在兩個方向進(jìn)行變化，這是根據(jù)你傳遞的 startVal 和 endVal 參數(shù)判斷的。 再加上滾輪事件判斷。
可配置的參數(shù)：
- target = 目標(biāo)元素的 ID；
- startVal = 開始值；
- endVal = 結(jié)束值；
- decimals = 小數(shù)位數(shù)，默認(rèn)值是0；
- duration = 動畫延遲秒數(shù)，默認(rèn)值是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)文章
本篇文章是對在JS中Map和List的簡單實現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-07-07
這篇文章主要介紹了JavaScript如何生成二維數(shù)組問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
javascript 實現(xiàn)雙擊才能打開鏈接的方法
javascript 實現(xiàn)雙擊才能打開鏈接的方法...2007-08-08
基于KO+BootStrap+MVC實現(xiàn)的分頁控件代碼分享
本段js和html兩段代碼實現(xiàn)分頁控件效果，下面通過本文給大家詳細(xì)介紹下基于KO+BootStrap+MVC實現(xiàn)的分頁控件，非常不錯，感興趣的朋友一起看看吧2016-11-11
下面小編就為大家?guī)硪黄狫avaScript 控制字體大小設(shè)置的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
越來越多的網(wǎng)站進(jìn)行數(shù)據(jù)傳輸時不使用明文傳輸,本文主要介紹了JS逆向之加密參數(shù)定位,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
這篇文章主要為大家分享了js實現(xiàn)精準(zhǔn)的倒計時函數(shù)，如何實現(xiàn)倒計時模塊，感興趣的小伙伴們可以參考一下2016-06-06
單例模式也稱作為單子模式，更多的也叫做單體模式。為軟件設(shè)計中較為簡單但是最為常用的一種設(shè)計模式。這篇文章主要介紹了Javascript實現(xiàn)單例模式的相關(guān)資料,需要的朋友可以參考下2016-01-01
JS 對象(Object)和字符串(String)互轉(zhuǎn)方法
下面小編就為大家?guī)硪黄狫S 對象(Object)和字符串(String)互轉(zhuǎn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要為大家詳細(xì)介紹了完美實現(xiàn)js焦點輪播效果的相關(guān)代碼，采用輔助圖片實現(xiàn)圖片無限滾動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03