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. Python Sphinx使用踩坑记录

    描述 使用 pip 安装sphinx后,按照教程建立了一个新的py文件,如下 # run.py def run(name): """ this is how we run ...

  2. 009.CI4框架CodeIgniter, 网页访问GET的URL参数获取,分段输出URL参数

    01.代码如下,我们给在PHP CI4框架中定义了一个show函数,并给了3个参数,代码如下: <?php namespace App\Controllers\System; use App\C ...

  3. ErrorCode=-2147217900 表已存在.

    ErrorCode=-2147217900 表已存在. 在导出excel时遇到这个问题. 原因是dataTable的TableName中有减号 "-"

  4. Essay Fail?可能是引用出了问题

    新学期伊始,又有不少成功与雅思分手的学生们海外入学.本以为可以稍微喘口气,却发现漫天的essay接踵而至.因此,Hotessay小编为新瓜蛋子们特地准备了一期essay写作的干货.还不赶紧学起来,用到 ...

  5. TCP/IP 三次握手,四次断开

    TCP/IP 三次握手,四次断开 一.TCP报文格式                     TCP/IP协议的详细信息参看<TCP/IP协议详解>三卷 本. 下面是TCP报文格式图: 图 ...

  6. 一道算法题加深我对C++中map函数的理解

    一.一道题目引发我对map函数的考量 首先是题目大意:有n个银行,a[i]表示这个人在第i个银行有a[i]块钱(可以是负数),所有银行的钱加起来正好是0.每次只能在相邻的银行之间转账,问最少要转多少次 ...

  7. Arduino 的读串口与写串口

    //准备一下             while(Serial.available()>0)        WifiSerial.write(Serial.read());         wh ...

  8. raspberry pi-php-exec

    遇到的问题是在树莓派上搭建的web服务器,想通过网页操控树莓派的gpio,网页是通过php实现的,通过php的exec函数调用写好的程序实现对gpio的操作,但是赖何没有效果,分析也知道是权限问题,最 ...

  9. JavaWeb学习——了解HTML

    JavaWeb学习——了解HTML 摘要:本文主要简单介绍了什么是HTML以及如何使用. 定义 是什么 HTML(Hyper Text Markup Language),指的是超文本标记语言. 超文本 ...

  10. Git提交出现error: src refspec master does not match any的问题

    在本地与远程分别新建了一个仓库并且关联后,想要把本地的文件提交到github上面, 输入下方命令后没有成功,而是出现了报错:error: src refspec master does not mat ...