CountUp.js  实现数字跳转效果的小插件

//调用方法

const easingFn = function (t, b, c, d) {
var ts = (t /= d) * t;
var tc = ts * t;
return b + c * (tc * ts + -5 * ts * ts + 10 * tc + -10 * ts + 5 * t);
}
const options = {
  startVal: 5240, //开始时间
duration: 2.1, //动画效果时间
  easingFn,
};
let demo = new CountUp('myTargetElement', 60000 //结束时间, options);
if (!demo.error) {
  demo.start();
} else {
  console.error(demo.error);
}

  

展示demo地址:http://inorganik.github.io/countUp.js/

CountUp.js 数字跳转效果小插件的更多相关文章

  1. js 实现吸顶效果 || 小程序的吸顶效果

    小程序吸顶效果 <!--index.wxml--> <view class="container"> <view class='outside-img ...

  2. jquery轻量级数字动画插件jquery.countup.js

    插件描述: jquery.countup.js 是一款轻量级jquery数字动画插件.该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画. 插件说明 jquery.countup.js  ...

  3. Countup.js:vue-countup-v2(npm)数字滚动插件

    1.官方地址:http://inorganik.github.io/countUp.js/ 2.官方demo: 3.参数说明: params——start(开始数字).end(结束数字).decima ...

  4. CountUp.js用法 让数字动起来的插件

    CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...

  5. CountUp.js – 让数字以非常有趣的动画方式显示

    CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...

  6. Vue.js大屏数字滚动翻转效果

    ================================ 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最 ...

  7. 浮动【电梯】或【回到顶部】小插件:iElevator.js

    iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null ...

  8. 好用的jquery.animateNumber.js数字动画插件

    在做公司的运营报告页面时,有一个数字累计增加的动画效果,一开始,毫无头绪,不知如何下手,于是上网查资料,发现大多都是用的插件来实现的,那么今天,我也来用插件jquery.animateNumber.j ...

  9. 黑色半透明镂空遮罩指引效果实现jQuery小插件

    /*! * by zhangxinxu(.com) 2017-05-18 * 新版上线时候的黑色半透明镂空遮罩指引效果实现jQuery小插件 * 兼容到IE8+ * MIT使用协议,使用时候保留版权 ...

随机推荐

  1. 使用JMX连接JVM

    什么是JMX? 什么是JMX,Java Management Extensions,即Java管理扩展,是一个为应用程序.设备.系统等植入管理功能的框架.JMX可以跨越一系列异构操作系统平台.系统体系 ...

  2. Oracle删除重复数据并且只留其中一条数据

    数据库操作中,经常会因为导数据造成数据重复,需要进行数据清理,去掉冗余的数据,只保留正确的数据 一:重复数据根据单个字段进行判断 1.首先,查询表中多余的数据,由关键字段(name)来查询. sele ...

  3. android侧滑效果(引用官方网站提供的API文件)

    原文地址:http://www.cnblogs.com/android100/p/android-SlidingMenu.html 在新浪微博和唱吧里面都有看到android的侧滑效果,于是想要学习一 ...

  4. C中的文件操作函数[笔记]

    头件 : #include<stdio.h> 两个必须函数: FILE * fopen(const char * path,const char * mode); //path:文件路径 ...

  5. 064、Java中递归调用

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  6. MyBatis: No MyBatis mapper was found in '[xx.mapper]' package. Please check your configuration

    在应用入口加入@MapperScan("com.IBM.XXXXX.dao")

  7. 洛谷P1002——过河卒

    又是洛谷题,要不是有小姐姐不会,我才不想动脑子.先贴一下题目地址https://www.luogu.org/problem/P1002 再贴一下题目: 我们读一下题目,这可不比学校的**算法题,读完一 ...

  8. c++链表演示

    #include<iostream> #include<string.h> #include<conio.h> using namespace std; #defi ...

  9. 福州大学2020年春软工实践W班第二次作业

    作业描述 这个作业属于哪个课程 福州大学2020年春软工实践W班 这个作业要求在哪里 寒假作业(2/2) 这个作业的目标 开发一个疫情统计程序 作业正文 福州大学2020年春软工实践W班第二次作业 其 ...

  10. STM32中ARM系列编译工具链的编译宏选择(__CC_ARM、__ICCARM__、__GNUC__、__TASKING__)

    一 前言 stm32 f103中.关系到一个选择何种编译宏的问题.这里就梳理一下吧. 二 正文 1  在 core_cm3.h 文件中,有如下代码: #if defined ( __CC_ARM ) ...