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. Live Archive 训练题 2019/3/9

    7454 Parentheses A bracket is a punctuation mark, which is used in matched pairs, usually used withi ...

  2. 王者荣耀交流协会-Alpha发布用户使用报告

    用户数量:10人 姓名如下(包括化名):张小斌.王瑞瑞.蛋蛋.小美.晨曦.小丽.张利刚.小闫.小谢.小崔 寻找的用户多为王者荣耀交流协会成员的同学,对管理时间有着强烈的需求,也对PSP Daily软件 ...

  3. Hash开散列 拉链法

    #include<iostream> #include<cstdio> using namespace std; const int maxn=1000007; struct ...

  4. 常用的比较器:实现方式Compareable和Comparator

    class Dog{ int size; int weight; public Dog(int s, int w){ size = s; weight = w; } } 目的:对于Dog对象作为元素所 ...

  5. C#高级编程 (第六版) 学习 第四章:继承

    第四章 继承 1,继承的类型 实现继承: 一个类派生于一个基类型,拥有该基类型所有成员字段和函数. 接口继承 一个类型只继承了函数的签名,没有继承任何实现代码.   2,实现继承 class MyDe ...

  6. iOS- 全方位解析.crash文件崩溃报告

    1.前言 想来每个iOS攻城狮,都免不了要接触.crash文件 那么什么是.crash文件? iOS app的所有崩溃记录都会记录在设备上,所以对于和我一样没有集成让用户发送崩溃报告功能的iOS开发者 ...

  7. ngx_http_rewrite_module(重定向)

    1:指定rewrite规则 rewrite regex replacement [flag];   什么是rewrite规则:If the specified regular expression m ...

  8. QList和QVector使用

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QList和QVector使用     本文地址:http://techieliang.com ...

  9. (双人项目)四则运算 组员:杨钰宁 闫浩楠 开发语言:Python。

    需求分析:1.适用人群:小学生. 2.能进行“+,—,*,/” 的四则运算.难度可以随时修改. 3.提交试卷后可以显示所得分数并显示错题个数. 4.可以显示答对的题及其打错的题的序号. 代码如下: i ...

  10. linux svn启动和关闭

    linux svn启动和关闭 博客分类: linux系统 svnlinux  1,启动SVN sudo svnserve -d -r /home/data/svn/ 其中 -d 表示守护进程, -r ...