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

//调用方法

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

  

展示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. 解决使用还原卡的PC在2个月后要重新加入域的问题

    客户端正确操作: 1. 启动注册表编辑器. 要这样做, 请依次单击 开始 . 运行 , 类型 regedit 在 打开, 框, 然后单击 确定 . 2. 找到并单击以下注册表子项: HKEY_LOCA ...

  2. linux测试网速

    wget https://raw.githubusercontent.com/sivel/speedtest-cli/master/speedtest.py python speedtest.py D ...

  3. 009-PHP循环输出数组成员

    <?php $Cities[] = "<B>北京</B>"; //等同于$Cities[0] = "北京" $Cities[] = ...

  4. ②初识spring

    一:基础搭建 需要:eclipse.spring插件(确认版本号并下载对应插件详见:https://blog.csdn.net/a1150499208/article/details/87988392 ...

  5. oracle job不运行,定位问题

    一. job的运行频率设置 1.每天固定时间运行,比如早上8:10分钟:Trunc(Sysdate+1) + (8*60+10)/24*60 2.Toad中提供的: 每天:trunc(sysdate+ ...

  6. 启动Eureka出现错误:Archive for required library in project cannot be read or is not a valid ZIP file

    To fix issues like that, let Maven download the files again: Delete the folder D:/mypath/.m2/reposit ...

  7. bzoj 2796: [Poi2012]Fibonacci Representation

    结论貌似是,,,肯定只有没有重复的数字.http://hzwer.com/6426.html 一开始猜的是贪心,感觉也是可以的啊...(想想都有道理,然而看到是神奇的(dp类)记忆化搜索,直接虚的不敢 ...

  8. [LeetCode] 930. Binary Subarrays With Sum 二元子数组之和

    In an array A of 0s and 1s, how many non-empty subarrays have sum S? Example 1: Input: A = [1,0,1,0, ...

  9. spring mvc绑定参数之日期类型转换

    问题复现步骤: 1.提交表单,参数为: 2.接收参数类型为product实体类,如下 3.错误日志如下: org.springframework.validation.BindException: o ...

  10. 一、JavaScript之第一个实例,点击按钮修改文本内容

    一.代码如下: 二.运行后效果如下 三.点击按钮,"曾经沧海难为水"变成了日期事件了 <!DOCTYPE html> <html> <meta htt ...