数字滚动特效 NumScroll
1.使用前先引入jquery
2.前端学习群:814798690
下载地址
快速使用
1.引入 jquery 和 jquery.numscroll.js
1
2
|
<script src= 'http://code.jquery.com/jquery-2.1.1.min.js' type= 'text/javascript' ></script> <script src= "js/jquery.numscroll.js" type= "text/javascript" charset= "utf-8" ></script> |
2.拷贝以下布局结构
1
|
< span class="num">888888</ span > |
3.创建numscroll对象:
1
|
$( ".num" ).numScroll(); |
API文档
可选参数 | 默认值 | 说明 |
---|---|---|
time | 1500 | 滚动总时长 |
delay | 0 | 延迟启动时长 |
案例展示
插件源码:
/*!
* jquery.numscroll.js -- 数字滚动累加动画插件 (Digital rolling cumulative animation)
* version 1.0.0
* 2018-09-22
* author: KevinTseng < 921435247@qq.com@qq.com >
* 文档: https://github.com/chaorenzeng/jquery.numscroll.js.git
* QQ交流群: 739574382
*/ (function($) { function isInt(num) {
//作用:是否为整数
//返回:true是 false否
var res = false;
try {
if(String(num).indexOf(".") == -1 && String(num).indexOf(",") == -1) {
res = parseInt(num) % 1 === 0 ? true : false;
}
} catch(e) {
res = false;
}
return res;
} function isFloat(num) {
//作用:是否为小数
//返回:小数位数(-1不是小数)
var res = -1;
try {
if(String(num).indexOf(".") != -1) {
var index = String(num).indexOf(".") + 1; //获取小数点的位置
var count = String(num).length - index; //获取小数点后的个数
if(index > 0) {
res = count;
}
}
} catch(e) {
res = -1;
}
return res;
} $.fn.numScroll = function(options) { var settings = $.extend({
'time': 1500,
'delay': 0
}, options); return this.each(function() {
var $this = $(this);
var $settings = settings; var num = $this.attr("data-num") || $this.text(); //实际值
var temp = 0; //初始值
$this.text(temp);
var numIsInt = isInt(num);
var numIsFloat = isFloat(num);
var step = (num / $settings.time) * 10; //步长 setTimeout(function() {
var numScroll = setInterval(function() {
if(numIsInt) {
$this.text(Math.floor(temp));
} else if(numIsFloat != -1) {
$this.text(temp.toFixed(numIsFloat));
} else {
$this.text(num);
clearInterval(numScroll);
return;
}
temp += step;
if(temp > num) {
$this.text(num);
clearInterval(numScroll);
}
}, 1);
}, $settings.delay); });
}; })(jQuery);
实例源码:
## NumScroll
#### 数字滚动累加动画插件
1.使用前先引入jquery
2.前端学习群:814798690
#### 快速使用
1.引入jquery和jquery.numscroll.js
```js
<script src='http://code.jquery.com/jquery-2.1.1.min.js' type='text/javascript'></script>
<script src="js/jquery.numscroll.js" type="text/javascript" charset="utf-8"></script>
```
2.拷贝以下布局结构
```html
<!--默认写法-->
<span class="num">888888</span>
<!--推荐写法-->
<span class="num" data-num="888888"></span>
```
3.创建numscroll对象:
```js
$(".num").numScroll();
```
#### API文档
可选参数 | 默认值 | 说明
-- | -- | --
time | 1500 | 滚动总时长
delay | 0 | 延迟启动时长 #### 案例展示
![查看演示](https://github.com/chaorenzeng/jquery.numscroll.js/blob/master/index.gif)
备注:原文地址https://www.cnblogs.com/KevinTseng/p/9690139.html
数字滚动特效 NumScroll的更多相关文章
- 那些H5用到的技术(6)——数字滚动特效
前言原理源码使用方式补充CountUp.js 前言 会有这么一种情况,H5页面需要进行数字统计展示,以此来强调产品or工作的成果.如果只是静态显示一个数字,总是感觉生硬.对比如下: 是不是瞬间高大上了 ...
- #Plugin 数字滚动累加动画插件
数字滚动累加动画插件 NumScroll 1.使用前先引入jquery2.前端学习群:814798690 下载地址 https://github.com/chaorenzeng/jquery.num ...
- JavaScript 数字滚动countup.js
1. 概述 1.1 说明 在项目过程中,有时候需要动态的去展示一些数据的加载状态,如一个数字为10000,需要5秒时间滚动加载完成.此时使用countup.js就能够很方便的处理此类功能问题. 1.2 ...
- jquery版楼层滚动特效
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>楼 ...
- Sequence.js 实现带有视差滚动特效的图片滑块
Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...
- 一款非常炫酷的jQuery动态随机背景滚动特效
一款非常炫酷的jQuery动态随机背景滚动特效 图片背景会不停息的滚动,带有那种漂浮的视觉效果,小圈圈飘动. 更好的是还兼容IE6浏览器,大伙可以好好研究研究. 适用浏览器:IE6.IE7.IE8.3 ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- JQ滚动特效
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- 让数字变化炫酷起来,数字滚动Text组件[Unity]
让数字滚动起来 上周我的策划又提了样需求,当玩家评分发生变动时,屏幕出现人物评分浮层UI,播放评分数字滚动动画.这类数字滚动需求非常常见,我就按一般思路,将startvalue与endvalue每隔一 ...
随机推荐
- Java拓展接口-default关键词
Java接口在使用过程中有两点规定: 1.接口中只能有定义方法名.方法返回类型,不能有方法的实现. 2.实现接口的类,必须实现接口中所有的方法. 例如下面的例子: //定义接口 public inte ...
- leetcode-884两句话中的不常见单词
''' 给定两个句子 A 和 B . (句子是一串由空格分隔的单词.每个单词仅由小写字母组成.) 如果一个单词在其中一个句子中只出现一次,在另一个句子中却没有出现,那么这个单词就是不常见的. 返回所有 ...
- Codeforces 1079C Playing Piano(记忆化搜索)
题目链接:Playing Piano 题意:给定长度为n的序列$a_i$,要求得到同样长度的序列$b_i$.满足一下条件: if $a_i < a_{i+1}$ then $b_i < b ...
- [jzoj]4271. 【NOIP2015模拟10.27】魔法阵(37种转移的dp)
题意不说 应该这辈子都不会忘记了... 这是我人生中做的最SB的一道DP题. 真的打的我心态崩了.... 可是竟然被我调出来了..... 也是没谁了... 我们设\(F[i][j][S]\)表示到第\ ...
- 【GDOI2016模拟3.15】基因合成(回文串+性质+DP)
[GDOI2016模拟3.15]基因合成 题意: 给一个目标串,要求从空串进行最少的操作次数变成目标串,操作有两种: 在串的头或尾加入一个字符. 把串复制一遍后反向接到串的末尾. 因为有回文操作,所以 ...
- HMM隐马尔科夫算法(Hidden Markov Algorithm)初探
1. HMM背景 0x1:概率模型 - 用概率分布的方式抽象事物的规律 机器学习最重要的任务,是根据一些已观察到的证据(例如训练样本)来对感兴趣的未知变量(例如类别标记)进行估计和推测. 概率模型(p ...
- Nginx常用的平滑重启
之前在做运维工作中,经常需要添加虚拟主机,或者添加修改配置文件,但是测试环境还好,随便玩,如果是生产环境的话,既要保证配置不出问题,有不能中断服务.如果是这样的话,就需要对配置文件进行语法检测以及平滑 ...
- Nginx反向代理、负载均衡、动静分离、缓存、压缩、防盗链、跨域访问
一.反向代理 1.在192.168.189.130机器启动tomcat服务,http://192.168.189.130:8080/ 访问服务正常 2.在192.168.189.131机器配置ngin ...
- openstack项目【day23】:Neutron实现网络虚拟化
本节内容 一 Neutron概述 二 neutron openvswitch+gre/vxlan虚拟网络 三 neutron ovs opnflow流表和l2 population 四 dhcp ag ...
- ACM-ICPC 2018 徐州赛区网络预赛 J Maze Designer(最大生成树+LCA)
https://nanti.jisuanke.com/t/31462 题意 一个N*M的矩形,每个格点到其邻近点的边有其权值,需要构建出一个迷宫,使得构建迷宫的边权之和最小,之后Q次查询,每次给出两点 ...