数字滚动特效 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每隔一 ...
随机推荐
- c语言第三次课
一.const的使用1)const声明变量为只读 ; a = ; //error ] = "abcdef"; const char *p = buf; char const *p ...
- Python——Django-模板
一.模板的种类 1.变量 {{变量名}} 2.语句类{% %} 2.1 {%for i in booklist%} {{i}} {%endfor%} 2.2 {%if 10>5%} {%else ...
- matplotlib绘图总结
本文作为学习过程中对matplotlib一些常用知识点的整理,方便查找. 类MATLAB API 最简单的入门是从类 MATLAB API 开始,它被设计成兼容 MATLAB 绘图函数. from p ...
- Java NIO系列教程(一) Java NIO 概述
<I/O模型之四:Java 浅析I/O模型> 一.阻塞IO与非阻塞IO 阻塞IO: 通常在进行同步I/O操作时,如果读取数据,代码会阻塞直至有 可供读取的数据.同样,写入调用将会阻塞直至数 ...
- Gradle(一)安装配置
Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建开源工具.它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置,抛弃了基于XML的各种繁琐配置.面向 ...
- 静态IP设置
先查看自动网络的ip地址,然后设置 cmd进入DOS输入命令:ipconfig /all 设置固定IP
- 第五节: EF高级属性(一) 之 本地缓存、立即加载、延迟加载(不含导航属性)
一. 本地缓存 从这个章节开始,介绍一下EF的一些高级特性,这里介绍的首先介绍的EF的本地缓存,在前面的“EF增删改”章节中介绍过该特性(SaveChanges一次性会作用于本地缓存中所有的状态的变化 ...
- HTML(四)HTML常用标签(a,img)
a元素 <a>元素 (或HTML锚元素, Anchor Element)通常用来表示一个锚点/链接.但严格来说,<a>元素不是一个链接,而是超文本锚点,可以链接到一个新文件.用 ...
- [物理学与PDEs]第2章习题3 Laplace 方程的 Neumann 问题
设 $\Omega$ 为单连通区域, 在其边界 $\vGa$ 上给定向量场 ${\bf u}_B$, 则在 $\bar\Omega$ 中存在速度场 ${\bf u}$, 使其在 $\Omega$ 中成 ...
- pycharm实用快捷键集锦
以下是本人需要记录的快捷键,并不针对大众,所以是断断续续补充的,大家看看图个乐呵就成! 生成代码块(Surround with):Ctrl + Alt + t . 历史浏览页面跳转:很多时候,我们需要 ...