由于项目需求,需要写一个数字增/减量的动画特效,最后找到了CountUp.js

CountUp.js是一个无依赖,轻量级的JavaScript“类”,可用于快速创建以更有趣的方式显示数字数据的动画。

使用需引入countUp.js文件,以下例子还引用了jquery.js

countUp.js文件地址:https://github.com/inorganik/CountUp.js

也可以访问:http://inorganik.github.io/countUp.js/

jquery.js文件地址:http://jquery.com/download/

            //选项配置
var options = {  
useEasing: true, //使用缓动
useGrouping: true, //使用分组
separator: ',', //分隔符
decimal: '.', //小数点
prefix: '', //前缀
suffix: '' //后缀
};
$(document).ready(function() {
//创建显示数字数据的动画实例
var demo = new CountUp('count', 0, 334, 2, 2.0, options);
if(!demo.error) {  
            //调用开启动画方法
demo.start();
} else {  
console.error(demo.error);
}
});
var demo = new CountUp('count', 0, 334, 2, 2.0, options);
创建实例函数参数说明:
target:目标元素的id
startVal:开始的数字
endVal:结束的数字
decimals:保留小数位数,默认0
duration:动画时长,单位秒,默认2
options:其他选项配置

快速创建显示数字数据的动画——CountUp.js的更多相关文章

  1. 通过Excel文件快速创建页面和数据表

    在设计一个软件系统,构建过程:需求->数据表->系统开发.实际情况是需求(数据)很多来源于已经存在的文件中,客户会要求把这些数据“电子化”,这就给需求分析产生了很大的工作量: 分析这些原始 ...

  2. JavaScript 数字滚动countup.js

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

  3. #.NET# DataGrid显示大量数据——DataGridView虚模式

    要解决的目标:如何让 Datagridview 快速平滑显示大量数据 通常,Winform 下的表格控件是很"低效"的,如 DataGrid 和 DataGridView.造成低效 ...

  4. webpack2--webpack 4.X 快速创建demo

    准备工作 1.新建文件夹:webpack-demo(下面我们简称该文件夹为根目录),在根目录下面建两个文件夹,分别为src和dist. 1).src文件夹:用来存放我们编写的javascript代码, ...

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

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

  6. (视频) 《快速创建网站》 3.1 WordPress 数据导入

    本文是<快速创建网站>系列的第5篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http://devopshub.cn/tag ...

  7. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  8. easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字

    先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...

  9. ASP.NET - 演练:创建网页以显示 XML 数据

    数据通常是以 XML 格式提供给 Web 应用程序的.但是,XML 数据本质上是分层的,因此您可能希望能够在基于列表的控件中使用 XML 数据,如 GridView 或 DropDownList 控件 ...

随机推荐

  1. jquery.rotate.js可选抽奖次数和中奖内容的转盘抽奖demo

    需求: 最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-cont ...

  2. 【2015 Week Task】

    2015 第17周 task:项目语音识别技术整理 2015 第18周 task:项目key技术整理

  3. MySQL代码备份

    package com.dus.utils; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io. ...

  4. python 学习 (迟到的2017小结)

    2017过去了,从前端开发转测试,入行一年多,写了web的UI自动化测试框架,看了python基础教程,核心编程,算是入门python了吧.目前呢,想开发个接口的自动化测试平台.           ...

  5. sqlplus中设置在屏幕中上不打印出输出

    在某些特定的情况下我们想在做某种实验,需要执行一段sql语句,但是不想在屏幕上打印出sql语句的结果(太长了)可以采用如下方式.1    把想要执行的语句写到一个sql脚本中,例如:[oracle@i ...

  6. 关于selenium无法定位动态元素的解决方法

    今天在写一个关于登录的自动化脚本时,在对元素定位时总会报下面的错:

  7. Android进阶笔记12:ListView篇之图片优化

    1.图片异步加载: (1)处理图片的方式: 如果ListView中自定义的Item中有涉及到大量图片的,一定要对图片进行细心的处理,因为图片占的内存是 ListView 项中最头疼的,处理图片的方法大 ...

  8. LA 3126 出租车

    题目链接:https://vjudge.net/problem/UVALive-3126 题意:有m个客人,位于不同的位置,去一些地方,出发的时间给出,要一些出租车去接,但是,每辆出租车要在出发前一分 ...

  9. js中json对象取键和值

    1.json中输出各个键值: var ohp = {"星期一":18,"星期二":16,"星期三":19,"星期四":1 ...

  10. 【洛谷P3388】(模板)割点

    [模板]割点 割点集合:一个顶点集合V,删除该集合的所有定点以及与这些顶点相连的边后,原图不连通,就称集合V为割点集合 点连通度:最小割点集合中的顶点数 边连通度:最小割边集合中的边数 割点:割点集合 ...