CountUp.js 数字跳转效果小插件
CountUp.js 实现数字跳转效果的小插件
//调用方法
const easingFn = function (t, b, c, d) {
var ts = (t /= d) * t;
var tc = ts * t;
return b + c * (tc * ts + -5 * ts * ts + 10 * tc + -10 * ts + 5 * t);
}
const options = {
startVal: 5240, //开始时间
duration: 2.1, //动画效果时间
easingFn,
};
let demo = new CountUp('myTargetElement', 60000 //结束时间, options);
if (!demo.error) {
demo.start();
} else {
console.error(demo.error);
}
展示demo地址:http://inorganik.github.io/countUp.js/
CountUp.js 数字跳转效果小插件的更多相关文章
- js 实现吸顶效果 || 小程序的吸顶效果
小程序吸顶效果 <!--index.wxml--> <view class="container"> <view class='outside-img ...
- jquery轻量级数字动画插件jquery.countup.js
插件描述: jquery.countup.js 是一款轻量级jquery数字动画插件.该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画. 插件说明 jquery.countup.js ...
- Countup.js:vue-countup-v2(npm)数字滚动插件
1.官方地址:http://inorganik.github.io/countUp.js/ 2.官方demo: 3.参数说明: params——start(开始数字).end(结束数字).decima ...
- CountUp.js用法 让数字动起来的插件
CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...
- CountUp.js – 让数字以非常有趣的动画方式显示
CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...
- Vue.js大屏数字滚动翻转效果
================================ 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最 ...
- 浮动【电梯】或【回到顶部】小插件:iElevator.js
iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null ...
- 好用的jquery.animateNumber.js数字动画插件
在做公司的运营报告页面时,有一个数字累计增加的动画效果,一开始,毫无头绪,不知如何下手,于是上网查资料,发现大多都是用的插件来实现的,那么今天,我也来用插件jquery.animateNumber.j ...
- 黑色半透明镂空遮罩指引效果实现jQuery小插件
/*! * by zhangxinxu(.com) 2017-05-18 * 新版上线时候的黑色半透明镂空遮罩指引效果实现jQuery小插件 * 兼容到IE8+ * MIT使用协议,使用时候保留版权 ...
随机推荐
- 编程题目: 找出最小的k个数
找出最小或者最大的几个数我使用的是堆排序,效率为0(nlgn) 构建小顶堆返回末尾的k个数 或者 构建大顶堆返回前k个数 #!/usr/bin/env python3 def heap_sort(ar ...
- Linux-kernel-timeline
Linux kernel Protocol Location HTTP https://www.kernel.org/pub/ GIT https://git.kernel.org/ RSYNC rs ...
- 原型与继承与class
对象有属性(专业点叫静态属性)和方法(专业点叫静态方法)和原型属性和原型方法 除了系统自带的那么几百万个对象,我们自己写在js的创建的对象,自定义的对象,都来自对象的构造函数,用来构造对象的函数,叫做 ...
- Day6 - K - 陌上花开 HYSBZ - 3262
有n朵花,每朵花有三个属性:花形(s).颜色(c).气味(m),用三个整数表示. 现在要对每朵花评级,一朵花的级别是它拥有的美丽能超过的花的数量. 定义一朵花A比另一朵花B要美丽,当且仅Sa>= ...
- 020、MySQL创建一个存储过程,显示存储过程,调用存储过程,删除存储过程
一.我们创建一个MySQL储存过程,在SQL代码区写入以下内容,并执行就可以了 #编写一个存储过程 CREATE PROCEDURE ShowDate ( ) BEGIN #输出当前时间 SELECT ...
- 015、MySQL取今天是第几季度,往后几个月是第几季度
#取今天是第几季度 SELECT QUARTER( curdate( ) ); #取往后几个月是第几季度 , INTERVAL MONTH ) ); , INTERVAL MONTH ) ); , I ...
- 侯捷C++学习(二)
#include <iostream>using namespace std;class complex{ public: complex (double r= 0, double i = ...
- C++面试常见问题——01预处理与宏定义
C++面试常见问题--------01预编译和宏的使用 C++预处理器 预处理器是一些指令,它将指示编译器在实际编译之前需要完成的预处理.预处理必须要在对程序进行词法与语义分析.代码生成与优化等通常的 ...
- 129-PHP子类不能访问父类private修饰的类成员
<?php class father{ //定义father类 //定义private修饰的类成员和方法 private $hair='curly hair'; private function ...
- Spark 资源调度 与 任务调度
Spark 资源调度与任务调度的流程(Standalone): 启动集群后, Worker 节点会向 Master 节点汇报资源情况, Master掌握了集群资源状况. 当 Spark 提交一个 Ap ...