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. socket发送文字、图片、文件---基于python实现

    socket官方文档:https://docs.python.org/2/library/socket.html socket中文详细介绍:http://blog.csdn.net/rebelqsp/ ...

  2. ES6中Class的继承关系

    es5实现中,每个对象都有__proto__属性(也就是关系图中[[prototype]]属性),指向对应的构造函数的prototype.Class 作为构造函数的语法糖,同时有prototype属性 ...

  3. CSS中水平居中设置的几种方式

    1.行内元素: 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. <body> <div class="t ...

  4. Android开发随笔2

    昨天:对anroid的系统架构了解比如:基于linux内核,整合库函数和java编译器并且为上层提供封装好的api和一些基本系统级应用 创建一个安卓的模拟器 了解了ddms的作用和内容 利用已有的工具 ...

  5. PHP 函数总结

    感觉对函数了解的不够深,从头到尾梳理一遍(更新中....) 1,class_exists(),interface_exists(),method_exists(),get_class(),get_pa ...

  6. OOP 2.2 构造函数

    1.概念 成员函数的一种 名字与类名相同,可以有参数,没有返回值(void也不行) 作用:对对象进行初始化,如给成员函数赋初始值 如果定义时没有构造函数,则编译器生成一个默认无参数的构造函数 默认构造 ...

  7. t2

    测评项目 : 福大助手 组长博客链接:https://www.cnblogs.com/dawnduck/p/10093752.html 第一部分:调研,评测 评测 1. 第一次上手体验 安卓: 进入页 ...

  8. lintcode-205-区间最小数

    205-区间最小数 给定一个整数数组(下标由 0 到 n-1,其中 n 表示数组的规模),以及一个查询列表.每一个查询列表有两个整数 [start, end]. 对于每个查询,计算出数组中从下标 st ...

  9. iOS- Swift:如何使用iOS8中的UIAlertController

    1.前言 在前段时间手机QQ:升级iOS8.3后,发图就崩的情况, 就是因为iOS8更新UIAlertController后,仍然使用UIAlertview导致的 具体原因分析 这个可以看腾讯团队发出 ...

  10. 使用git下载编译erlang

    git clone https://github.com/erlang/otp cd otp git tag git checkout -b OTP- OTP- ./otp_build all exp ...