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

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

演示网址:http://inorganik.github.io/countUp.js/

var demo = new CountUp("myTargetElement", 0, 21.25, 2, 1, options);
demo.start();

  

CountUp.js用法 让数字动起来的插件的更多相关文章

  1. CountUp.js让页面数字跳动起来

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

  2. 用TweenMax.js动画让数字动起来

    html: <div class="val2">0</div> js: let val2 = document.getElementsByClassName ...

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

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

  4. JavaScript 数字滚动countup.js

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

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

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

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

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

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

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

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

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

  9. countUp.js-让数字动起来

    先上一段示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. 获取ip 笔记

    使用命令 Request.UserHostAddress;//IP地址 Request.UserHostName;//用户名. 1. 在ASP.NET中专用属性: 获取服务器电脑名:Page.Serv ...

  2. [日常] Go语言圣经--示例: 并发的Echo服务

    最简单的回声服务器: package main import ( "io" "net" "log" ) func main() { list ...

  3. Web前端基础——JavaScript

    一.脚本程序和 javascrip    Javascript脚 本是嵌套在HTML网页中的程序语言,浏览器带有脚本程序的解释器(脚本引擎).脚本也可以有多种,比如还有vbscript, JScrip ...

  4. Java多线程高级主题

    任务定时调度 通过Timer和TimerTask,我们可以实现定时启动某个线程. java.util.Timer:类似闹钟的功能,本身实现的就是一个线程 java.util.TimerTask:一个抽 ...

  5. js 日文全半角转换

    客户的需求是,输入半角字符或日语假名,筛选出来的结果显示包含该字符的半角形式和全角形式的所有结果,输入全角也是同样的结果.这里就需要将输入的字符全部转为半角和全角,再去匹配结果. 在网上搜了一圈之后, ...

  6. 使用cgroup进行系统资源使用限制

    环境:Centos 7 64 一.对某个进程限制它使用cpu为50% 1.先写一个占用cpu较高的脚本 x=0 while [ True ];do x=$x+1 done; 2.可以看到运行后cpu使 ...

  7. 【读书笔记】iOS-自定义视图的创建

    静态创建自定义视图就是以拖动的方法来创建. 动态创建自定义视图可以理解为使用代码来创建自定义视图. 参考资料:<iOS7开发快速入门>

  8. js 函数中形参与实参的关系

    函数中形参与实参的关系 对于形参和实参的定义,在 权威指南中有着明确的定义.但是,我们更在意的是它们之间的关系,到底形参会不会影响到实参? 形参到底会不会影响到实参? 对于这个问题的答案,请先看以下两 ...

  9. CentOS7上搭建LDAP-PDC并且将windows 2008 R2加入LDAP-PDC域

    由于测试原因,要涉及到将windows机器加入到ldap域,所以查看各种文档进行ldap-pdc域的搭建,并成功将windows 2008r2加入到ldap-pdc域中.下面简单记录一下搭建过程 Li ...

  10. BCG库的一个bug

     作者:朱金灿 来源:http://blog.csdn.net/clever101 同事在使用BCG库图表组件(BCG库的版本为BCGCBPRO1510)时遇到一个问题,就是图表标题总是出现乱码, ...