由于项目需求,需要写一个数字增/减量的动画特效,最后找到了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/

  1. //选项配置
  2. var options = {  
  3. useEasing: true, //使用缓动
  4. useGrouping: true, //使用分组
  5. separator: ',', //分隔符
  6. decimal: '.', //小数点
  7. prefix: '', //前缀
  8. suffix: '' //后缀
  9. };
  10. $(document).ready(function() {
  11. //创建显示数字数据的动画实例
  12. var demo = new CountUp('count', 0, 334, 2, 2.0, options);
  13. if(!demo.error) {  
                //调用开启动画方法
  14. demo.start();
  15. } else {  
  16. console.error(demo.error);
  17. }
  18. });
  1. var demo = new CountUp('count', 0, 334, 2, 2.0, options);
  1. 创建实例函数参数说明:
    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. vuejs的双向数据绑定实现原理——object.defineproperty()

    视图和数据变化绑定 而vue.js主要利用了accessor descriptors的set和get来更新视图,这里看到的这个例子挺好,是一个简单的绑定.对于一个html页面 <div> ...

  2. Android ViewPager+TabHost实现首页导航

    今天发的是TabHost结合ViewPager实现首页底部导航的效果,虽然说网上有很多这样的Demo,不过呢,我还是要把自己练习写的发出来,没错!就是这么任性: 先上效果图,如下: 代码里面有注释,就 ...

  3. qt 创建线程

    http://www.cnblogs.com/xinxue/p/6840315.html Qt 之 QtConcurrent 本文以 Qt 中的 QtConcurrent::run() 函数为例,介绍 ...

  4. Appium Android 元素定位方法 原生+H5

    APPIUM Android 定位方式   1.定位元素应用元素 1.1通过id定位元素 Android里面定位的id一般为resrouce-id: 代码可以这样写: WebElement eleme ...

  5. head标签必不可少的元素

    <head> 标签用于定义文档的头部,它是所有头部元素的容器.<head> 中的元素可以引用脚本.指示浏览器在哪里找到样式表.提供元信息等等. 文档的头部描述了文档的各种属性和 ...

  6. t d x 示例z

    using System; using System.Collections.Generic; using System.Linq; using System.Runtime.InteropServi ...

  7. Spark天堂之门解密

    本课主题 什么是 Spark 的天堂之门 Spark 天堂之门到底在那里 Spark 天堂之门源码鉴赏 引言 Spark 天堂之门就是SparkContext,这篇文章会从 SparkContext ...

  8. Python3循环语句

    Python3 循环语句 Python中的循环语句有for和while. 循环语句控制结构图如下: 一.while循环 ①循环结构 while 判断条件: 执行语句 实例: n = int(input ...

  9. cJSON库源码分析

    本文采用以下协议进行授权: 自由转载-非衍生-保持署名|Creative Commons BY-NC-ND 3.0 ,转载请注明作者及出处. cJSON是一个超轻巧,携带方便,单文件,简单的可以作为A ...

  10. BZOJ2648/2716:SJY摆棋子/[Violet]天使玩偶(K-D Tree)

    Description 这天,SJY显得无聊.在家自己玩.在一个棋盘上,有N个黑色棋子.他每次要么放到棋盘上一个黑色棋子,要么放上一个白色棋子,如果是白色棋子,他会找出距离这个白色棋子最近的黑色棋子. ...