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. C#操作IIS程序池及站点的创建配置

    最近在做一个WEB程序的安装包:对一些操作IIS进行一个简单的总结:主要包括对IIS进行站点的新建以及新建站点的NET版本的选择,还有针对IIS7程序池的托管模式以及版本的操作:首先要对Microso ...

  2. 兔子--gradle安装和配置

    1.下载gradle,下载--all的这个 点击进入下载页 2.下载下来后,解压.配置环境变量. 编辑path , ....;G:\soft\gradle-2.2.1-all\gradle-2.2.1 ...

  3. react学习笔记-02

    1.组件嵌套 React允许将代码封装成一个component,然后像html标签一样,插入网页中中. var HelloMessage = React.createClass({ render: f ...

  4. kafka 消费​

    前置资料  kafka kafka消费中的问题及解决方法: 情况1: 问题:脚本读取kafka 数据,写入到数据库,有时候出现MySQL server has gone away,导致脚本死掉.再次启 ...

  5. 【BZOJ2333】棘手的操作(左偏树,STL)

    [BZOJ2333]棘手的操作(左偏树,STL) 题面 BZOJ上看把... 题解 正如这题的题号 我只能\(2333\) 神TM棘手的题目... 前面的单点/联通块操作 很显然是一个左偏树+标记 ( ...

  6. C++虚拟多重继承对象模型讨论

    C++虚拟多重继承对象模型讨论 作者:magictong 调试环境:Windows7VS2005 概述 记得刚开始写C++程序时,那还是大学时光,感觉这玩意比C强大多了,怎么就实现了多态,RTTI这些 ...

  7. JavaScript学习之自动轮播图片

    定时器 在实现轮播图之前需要首先了解一下JavaScript的定时器 setInterval()和clearInterval() 1.setInterval() 方法可按照指定的周期(以毫秒计)来调用 ...

  8. TensorFlow GPU版本号与CUDA的对应产生的错误

    前言 感悟:cuda 8.0+cudnn 6.0+TensorFlow 1.3  cuda 9.0+cudnn 7.0+TensorFlow 1.7 python3.6.2+cuda 9.0+cudn ...

  9. 匹配字符串中的s开头的单词,并替换

    String s="now it's sping,but today is so cold!"; String a=s.replaceAll("s\\w+",& ...

  10. laravel5.4+vue+element简单搭建(gulp+laravel Elixir)(转)

    如今laravel来到5.4版本,更方便引入vue了,具体步骤如下: 下图为我动到的文件 1.下载laravel5.4 2.命令行(laravel5.4目录下):composer install 3. ...