快速创建显示数字数据的动画——CountUp.js
由于项目需求,需要写一个数字增/减量的动画特效,最后找到了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的更多相关文章
- 通过Excel文件快速创建页面和数据表
在设计一个软件系统,构建过程:需求->数据表->系统开发.实际情况是需求(数据)很多来源于已经存在的文件中,客户会要求把这些数据“电子化”,这就给需求分析产生了很大的工作量: 分析这些原始 ...
- JavaScript 数字滚动countup.js
1. 概述 1.1 说明 在项目过程中,有时候需要动态的去展示一些数据的加载状态,如一个数字为10000,需要5秒时间滚动加载完成.此时使用countup.js就能够很方便的处理此类功能问题. 1.2 ...
- #.NET# DataGrid显示大量数据——DataGridView虚模式
要解决的目标:如何让 Datagridview 快速平滑显示大量数据 通常,Winform 下的表格控件是很"低效"的,如 DataGrid 和 DataGridView.造成低效 ...
- webpack2--webpack 4.X 快速创建demo
准备工作 1.新建文件夹:webpack-demo(下面我们简称该文件夹为根目录),在根目录下面建两个文件夹,分别为src和dist. 1).src文件夹:用来存放我们编写的javascript代码, ...
- CountUp.js – 让数字以非常有趣的动画方式显示
CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...
- (视频) 《快速创建网站》 3.1 WordPress 数据导入
本文是<快速创建网站>系列的第5篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http://devopshub.cn/tag ...
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字
先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...
- ASP.NET - 演练:创建网页以显示 XML 数据
数据通常是以 XML 格式提供给 Web 应用程序的.但是,XML 数据本质上是分层的,因此您可能希望能够在基于列表的控件中使用 XML 数据,如 GridView 或 DropDownList 控件 ...
随机推荐
- unity3D使用C#遍历场景内所有元素进行操作
最近入门Unity3D,跟着教程做完了survival射击游戏,就想加一个功能,就是按一个按钮屏幕上的怪物都清空. 如图右下角所示. 我的方法是赋予所有怪物一个标签Tag,然后根据标签销毁Gameob ...
- 前端之CSS——盒子模型和浮动
一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...
- overflow:hidden的用法
overflow:hidden是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. <%@ Page Language="C#& ...
- ASP.NET MVC 音乐商店 - 5 通过支架创建编辑表单 续
查看 StoreManager 控制器的代码 现在,Store Manager 控制器中已经包含了一定数量的代码,我们从头到尾重新过一下. 首先,在控制器中包含了标准的 MVC 控制器的代码,为了使用 ...
- 05_Jedis操作Redis
[工程截图] [String类型操作] package com.higgin.string; import java.util.List; import redis.clients.jedis.Jed ...
- Jmeter(一)http接口添加header和cookie --转载
Jmeter(一)http接口添加header和cookie HTTP信息头管理器在Jmeter的使用过程中起着很重要的作用,通常我们在通过Jmeter向服务器发送http请求(get或者post ...
- constructor()方法
在做微信小程序的时候,需要对传输的数据进行加密,大牛给我介绍constructor()方法,不是很懂这个但是用了一次,今天来用自己的想法来理解这个方法 ———————————————————————— ...
- 为我们的SSR程序添加热更新功能
前沿 通过上一篇文章 通过vue-cli3构建一个SSR应用程序 我们知道了什么是SSR,以及如何通过vue-cli3构建一个SSR应用程序.但是最后遗留了一些问题没有处理,就是没有添加开发时的热更新 ...
- Git/Github Learning
通过网上查找资料,我了解到Git/Github是一款免费.开源的分布式版本控制系统,它可以敏捷高效地处理任何或小或大的项目.同时,它是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的 ...
- Android(java)学习笔记52:成员位置的内部类的介绍
1. 内部类的定义 /* 内部类概述: 把类定义在其他类的内部,这个类就被称为内部类. 举例:在类A中定义了一个类B,类B就是内部类. 内部的访问特点: A:内部类可以直接访问外部类的成员,包括私有. ...