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. Day5 - D - Conscription POJ - 3723

    Windy has a country, and he wants to build an army to protect his country. He has picked up N girls ...

  2. 011、Java中将范围大的数据类型变为范围小的数据类型

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

  3. docker centos 镜像中安装python36详解!生成centos+python36的基础镜像

    获取centos镜像docker pull centos:7.4.1708 启动并进入centos的容器docker run -i –t centos /bin/bash下载安装python编译环境依 ...

  4. 三、深入Vue组件——Vue插槽slot、动态组件

    一.插槽slot() 1.1简单插槽slot [功能]用于从父组件中,通过子组件写成双标签,向子组件中放入自定的内容 parent.vue [1]首先把child写成双标签样式,把要插入的内容放双标签 ...

  5. redis学习(六)

    一.Redis 数据备份与恢复 1.Redis SAVE 命令用于创建当前数据库的备份.该命令将在 redis 安装目录中创建dump.rdb文件. 2.语法:redis 127.0.0.1:6379 ...

  6. 《分布式消息中间件实践》P153

    问题:我直接把作者的源码拷贝下来(包括xml,resource等,作者应该使用的是Eclipse,我复制到IDEA上),依赖加上.执行P153的步骤,报错如下: Exception in thread ...

  7. P1044 火星数字

    P1044 火星数字 转跳点:

  8. [百度之星]资格赛:IP聚合

    保持着也不知道什么情怀,觉得到现在才能发出来.这道题做完之后看了其他人的代码,然后再看我的,不得不说,真是幼稚的很,尤其是输入这一块,都什么跟什么啊. 但相较于之前来说,不像以前慌张了,学会先思考再去 ...

  9. redis主从遇到的问题

    rendis安装 主从切换 Redis的HA方案 Redis高可用架构(1)—Keepalive+VIP 还是配置的问题   从一直无法连接上主 redis.conf配置 # Examples:# 1 ...

  10. Essay引用如何最大限度的降低抄袭率

    今天要说到让无数人恨得要死.为了降重改的哭天喊地的“Paraphrase”.毕竟引用不是打两个引号复制粘贴就能凑字数完事的,无论国内外,都有查重率这个大敌在等着你.想要引用别人的论点论据,就少不了需要 ...