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. 第3节 sqoop:5、实现数据的控制导入

    导入表数据子集 我们可以导入表的使用Sqoop导入工具,"where"子句的一个子集.它执行在各自的数据库服务器相应的SQL查询,并将结果存储在HDFS的目标目录. where子句 ...

  2. MySQL导出数据库和导入数据库

    一.导出: 语法:mysqldump --default-character-set=utf8 -u用户名 -p密码 数据库名 -d --add-drop-table > 导出文件名.sql 注 ...

  3. Maven的原理和使用

    一.Maven能做什么 1.假设我们有10个项目,都需要引入spring core模块,那么需要十份重复的Spring Core.jar和commons-logging.jar 使用Maven:mav ...

  4. Linus Torvalds正式宣布Linux Kernel 5.1RC2 发布,相当正常

    导读 Linus Torvalds刚刚发布了Linux Kernel 5.2-rc2,这是继上周关闭合并窗口和随后的RC1之后的第一个内核测试版本. 在本周合并后的窗口活动中,Linus评论道,“嘿, ...

  5. golang 使用编译选项-H=windowsgui后,仍然输出log到console

    大概原理: 略略略... if debug { modkernel32 := syscall.NewLazyDLL("kernel32.dll") procAllocConsole ...

  6. duilib 之 List控件

    List控件是我们常用到的控件,也是应用很广泛. 对LIST控件添加元素有两种方法,一种是直接在XML中写死元素,另一种是动态创建.另外,LIST的应用也分为两种,一种需要表头,另一种是不需要表头.对 ...

  7. CSS - 强制换行和禁止换行强制换行 和禁止换行样

    强制换行 word-break: break-all;       只对英文起作用,以字母作为换行依据. word-wrap: break-word;   只对英文起作用,以单词作为换行依据. whi ...

  8. Oracle SQL 异常处理

    今天学了异常处理 有预定义异常 与 用户自定义异常 还有 raise_application_error()函数raise_application_error() 只能把异常抛出而不能处理异常. 预定 ...

  9. JDBC获取数据库连接慢

    RHEL6.4 获取Oracle数据库链接时快时慢,RHEL7.3获取Oracle数据库链接时一直很慢能够达到五万毫秒. 解决方法: 修改$JAVA_HOME/jre/lib/security/jav ...

  10. Python MySQL Where

    章节 Python MySQL 入门 Python MySQL 创建数据库 Python MySQL 创建表 Python MySQL 插入表 Python MySQL Select Python M ...