CountUp.js 无依赖的、轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据。尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 startVal 和 endVal 参数判断的。 再加上滚轮事件判断……

可配置的参数:
target = 目标元素的 ID;
startVal = 开始值;
endVal = 结束值;
decimals = 小数位数,默认值是0;
duration = 动画延迟秒数,默认值是2;

var options = {

  useEasing: true, 
  useGrouping: true, 
  separator: ',', 
  decimal: '.', 
};
var demo = new CountUp('myTargetElement', 0, 4068, 0, 2.5, options);
if (!demo.error) {
  demo.start();
} else {
  console.error(demo.error);
}

插件代码演示:http://www.jq22.com/yanshi10784

官网:http://inorganik.github.io/countUp.js/

CountUp.js让页面数字跳动起来的更多相关文章

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

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

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

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

  3. JavaScript 数字滚动countup.js

    1. 概述 1.1 说明 在项目过程中,有时候需要动态的去展示一些数据的加载状态,如一个数字为10000,需要5秒时间滚动加载完成.此时使用countup.js就能够很方便的处理此类功能问题. 1.2 ...

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

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

  5. 快速创建显示数字数据的动画——CountUp.js

    由于项目需求,需要写一个数字增/减量的动画特效,最后找到了CountUp.js CountUp.js是一个无依赖,轻量级的JavaScript“类”,可用于快速创建以更有趣的方式显示数字数据的动画. ...

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

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

  7. CountUp.js 数字跳转效果小插件

    CountUp.js  实现数字跳转效果的小插件 //调用方法 const easingFn = function (t, b, c, d) { var ts = (t /= d) * t; var ...

  8. MUI 里js动态添加数字输入框后,增加、减少按钮无效

    numbox 的自动初化是在 mui.ready 时完成的mui 页面默认会自动初始化页面中的所有数字输入框,动态构造的 DOM 需要进行手动初始化.比如:您动态创建了一个 ID 为 abc 的数字输 ...

  9. 使用js在页面上新建文件夹

    使用js在页面上新建文件夹 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

随机推荐

  1. 第一次作业(homework-01)成绩公布

    已收到博客名.github名的同学得分列表: 学号后三位 成绩(0-10) 215 8082 0132 5184 5027 7194 9.5157 7074 8195 6222 8158 6128 8 ...

  2. "Hello World"团队召开的第三周第七次会议

    今天是我们团队“Hello World!”团队召开的第三周的第七次会议.博客内容: 一.会议时间 二.会议地点 三.会议成员 四.会议内容 五.Todo List 六.会议照片 七.燃尽图 一.会议时 ...

  3. 汉诺塔python实现

    下载汉诺塔ppt def move(n,A,B,C): if n == 1: print(A,'->',C) else: move(n-1,A,C,B) print(A,'->',C) m ...

  4. SDN练习一

    SDN练习第一题 题目描述 实现网络拓扑: 具体要求: 南向接口采用OpenFlow 协议. 可查看网络的拓扑信息视图. H1.H2.H3.H4 任意两两可互通. 实现思路 利用mininet可视化图 ...

  5. springboot+vue+element:echarts开发遇见问题---vue前端(二)

    <template> <u-grid> <u-grid-item caption="服务使用统计排行"> <div class=" ...

  6. web压力测试_(收集)

    作者:ZeldaZzz链接:http://www.zhihu.com/question/19867883/answer/89775858来源:知乎著作权归作者所有,转载请联系作者获得授权. 一个完整的 ...

  7. HDU 2132 An easy problem

    http://acm.hdu.edu.cn/showproblem.php?pid=2132 Problem Description We once did a lot of recursional ...

  8. fsockopen 异步非阻塞式请求数据

    index.php <?php ini_set ( "max_execution_time", "0" ); // 要传递的数据 $form_data = ...

  9. js中如何获取页面的Url,域名和端口号

    有时候通过获取上个页面的Url来做一个跳转,获取域名防止非正常访问 获取上一个页面的一个URL,这个URL一般做一个页面的跳转 window.location.href <script>w ...

  10. 转---秒杀多线程第十二篇 多线程同步内功心法——PV操作上 (续)

    PV操作的核心就是 PV操作可以同时起到同步与互斥的作用. 1.同步就是通过P操作获取信号量,V操作释放信号量来进行. 2.互斥其实就是,同时操作P操作,结束后进行V操作即可做到. Java上实现PV ...