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