CountUp.js让页面数字跳动起来
CountUp.js 无依赖的、轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据。尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 startVal 和 endVal 参数判断的。 再加上滚轮事件判断……
可配置的参数:
target = 目标元素的 ID;
startVal = 开始值;
endVal = 结束值;
decimals = 小数位数,默认值是0;
duration = 动画延迟秒数,默认值是2;
【
var options = {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
};
var demo = new CountUp('myTargetElement', 0, 4068, 0, 2.5, options);
if (!demo.error) {
demo.start();
} else {
console.error(demo.error);
}
】
插件代码演示:http://www.jq22.com/yanshi10784
官网:http://inorganik.github.io/countUp.js/
CountUp.js让页面数字跳动起来的更多相关文章
- CountUp.js用法 让数字动起来的插件
CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...
- jquery轻量级数字动画插件jquery.countup.js
插件描述: jquery.countup.js 是一款轻量级jquery数字动画插件.该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画. 插件说明 jquery.countup.js ...
- JavaScript 数字滚动countup.js
1. 概述 1.1 说明 在项目过程中,有时候需要动态的去展示一些数据的加载状态,如一个数字为10000,需要5秒时间滚动加载完成.此时使用countup.js就能够很方便的处理此类功能问题. 1.2 ...
- CountUp.js – 让数字以非常有趣的动画方式显示
CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...
- 快速创建显示数字数据的动画——CountUp.js
由于项目需求,需要写一个数字增/减量的动画特效,最后找到了CountUp.js CountUp.js是一个无依赖,轻量级的JavaScript“类”,可用于快速创建以更有趣的方式显示数字数据的动画. ...
- Countup.js:vue-countup-v2(npm)数字滚动插件
1.官方地址:http://inorganik.github.io/countUp.js/ 2.官方demo: 3.参数说明: params——start(开始数字).end(结束数字).decima ...
- CountUp.js 数字跳转效果小插件
CountUp.js 实现数字跳转效果的小插件 //调用方法 const easingFn = function (t, b, c, d) { var ts = (t /= d) * t; var ...
- MUI 里js动态添加数字输入框后,增加、减少按钮无效
numbox 的自动初化是在 mui.ready 时完成的mui 页面默认会自动初始化页面中的所有数字输入框,动态构造的 DOM 需要进行手动初始化.比如:您动态创建了一个 ID 为 abc 的数字输 ...
- 使用js在页面上新建文件夹
使用js在页面上新建文件夹 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
随机推荐
- P4语法(4)Control block
Control block Control block之中用于放置设计好的Table和Action. 可以把control block认为是pipeline的一个模板,之前用的v1model中就是in ...
- net项目调试时,读取主干或其他项目代码问题
最近调试项目的时候出了一个很奇怪的问题. 项目总是去读取另外一个项目的配置文件,甚至执行的代码都是另外一个项目的. 我用vs修改代码时候,甚至修改到了其他项目的代码,生成不报错,很奇怪. 本来怀疑是v ...
- goroutine与channels
goroutine(协程) 大家都知道java中的线程Thread,golang没有提供Thread的功能,但是提供了更轻量级的goroutine(协程),协程比线程更轻,创办一个协程很简单,只需要g ...
- C#高级编程 (第六版) 学习 第二章:C#基础
第二章 基础 1,helloworld示例: helloworld.cs using System; using System.Collections.Generic; using System.Li ...
- WPF和Expression Blend开发实例:Adorner(装饰器)应用实例
装饰器-- 表示用于修饰 UIElement 的 FrameworkElement 的抽象类 简单来说就是,在不改变一个UIElement结构的情况下,将一个Visual对象加到它上面. 应用举例: ...
- CA如何吊销签署过的证书
1: 客户端获取要吊销证书的serial(在使用证书上的主机执行) openssl x509 -in httpd.crt -noout -serial -subject 2:拿到证书的编号后,通过 ...
- 关于初装kali linux 2.0时DEB文件安装失败的问题
kali linux 是一个基于debian 的linux发行版本,支持deb文件格式的图形化安装. 刚装上kali linux时安装程序总是失败,提示处理时错误. 经过一番爬贴,是软件源的原因,解决 ...
- NLP 入门
作者:微软亚洲研究院链接:https://www.zhihu.com/question/19895141/answer/149475410来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业 ...
- php反射机制应用
用来获取指定的类的信息,包括类中的属性,方法,方法权限,注释等 用途:1.thinkPHP框架中的前置,后置控制器的实现 2.与debug_backtrace函数结合使用,文件调用的权限管理 使用方法 ...
- eclipse官方网址、各个版本的下载
Eclipse3.1后各版本代号 (2013-07-10 20:48:42) 转载▼ 分类: Java Eclipse 3.1 版本代号 IO [木卫1,伊奥] Eclipse 3.2 版本代号 ...