这是关于数字加载的一个动画,从0开始变化到设置的数字,依赖于jquery,效果如下所示

当然,数字要显示的位数是可以设置的,默认是全部位数的数字,设置显示位数可以直接传递参数,例如:

html文件为:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数字</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/lib/sea.js"></script>
</head>
<body>
<h1 class="num" data-num="83692">0</h1>
<h2 class="num1" data-num="88692">0</h2>
<script type="text/javascript" src="js/entry.js"></script>
</body>
</html>

entry.js为主要js,是这个动画的方法,内容为:

function num_effect(dom,conf,fn){
if(typeof conf === 'function'){
fn = conf;
conf = {};
}
this.conf = $.extend({
digits: '', //显示的位数
time: 0.05 //动画时间,单位为s
}, conf || {});
this.fn = fn;
this.dom = $(dom);
this.val = this.dom.data("num");
this.handle();
} num_effect.prototype.handle = function(){
var self = this;
var str = self.val.toString();
var digits = parseInt(self.conf.digits);
if(isNaN(digits)){
digits = str.length;
}
var arrs = str.substr(0,digits).split("");
var j = 0, max = 0;
var setFun = setInterval(function(){
if(max >= digits){
clearInterval(setFun);
self.fn();//返回函数
}
(function(j){//更改值
var tmp = [];
for(var i=0; i<arrs.length; i++){
var now = parseInt(arrs[i]);
if(now > j){
tmp[i] = j;
}else{
if(now === j){
max ++;
}
tmp[i] = now;
}
}
self.dom.text(tmp.join(""));
})(j);
j++;
},self.conf.time*1000);
setFun;
} $.fn.extend({
numEffect: function(conf,fn){
this.each(function(i,dom){
new num_effect(dom,conf,fn);
});
}
});

那么调用这个方法实现动画只需要调用函数numEffect即可,如下

$(".num").numEffect();

如果加载完成后需要再执行一些js,那么只需如下这样即可:

$(".num,.num1").numEffect(function(){
console.log("加载完成");
});

查看entry.js可知,参数digits是控制显示的位数的,从左到右开始,time是数字变化的时间,单位为s,使用方法如下

$(".num1").numEffect({'digits': 2, 'time': 0.1});

目前,该函数只支持了这两个参数的设置,以及执行后的函数设置,没有实现按需执行动画,以后有需要了再说吧,暂时先这么做个笔记吧。

关于数字加载的动画 jquery的更多相关文章

  1. 页面预加载loading动画,再载入内容

    默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容 ...

  2. 三、js提交请求加载启动动画、请求完成成功回调、注销加载动画

    1.通过Query  post方式进行异步请求方法 jQuery.post(url, [data], [callback], [type]) 参数说明: url:发送请求地址 data:待发送 Key ...

  3. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

  4. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  5. Android 自定义View修炼-自定义加载进度动画XCLoadingImageView

    一.概述 本自定义View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进度颜色. ...

  6. CSharpGL(50)使用Assimp加载骨骼动画

    CSharpGL(50)使用Assimp加载骨骼动画 在(http://ogldev.atspace.co.uk/www/tutorial38/tutorial38.html)介绍了C++用Asism ...

  7. Android酷炫加载进度动画

    概述 本自定义动画进度酷炫View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进 ...

  8. CSS3实现加载数据动画2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. CSS3实现加载数据动画1

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. CornerNet 算法笔记

    论文名称:CornerNet: Detecting Objects as Paired Keypoints 论文链接:https://arxiv.org/abs/1808.01244 代码链接:htt ...

  2. python copy与deepcopy (拷贝与深拷贝)

    copy与deepcopy python 中的copy与deepcopy是内存数据的操作,但是两个函数有一定的区别. 1.copy import copy list = [1, [4, 5, 6], ...

  3. Centos磁盘空间不足,找不到占用文件

    服务器报警,系统"/"空间不足,但找不到哪些文件占用. 1.使用du -sh *,层层目录查看依然找不到 2.使用"lsof / | grep -i delete&quo ...

  4. 关于Linux文本处理“三剑客”的一些小操作。

    Linux文本处理“三剑客”,即grep.sed.awk,这是Linux中最核心 的3个命令. 一.首先做个简单的介绍: 1.awk:linux三剑客老大,过滤,输出内容,一门语言.NR代表行号. 2 ...

  5. Windows 窗体消息大全(速查)

    Windows窗口消息大全,全不全自己撸 通用窗口消息 WM_NULL:--------->空消息,可检测程序是否有响应等 WM_CREATE:--------->新建一个窗口 WM_DE ...

  6. Angular获取dom元素,以及父子组建之间相互传值

    1.使用原生js代码获取dom元素 在ts文件中有一个ngOnInit()的方法,这个方式是指在模块加载完毕之后并不是dom加载完毕,也就是说如果你的dom元素中使用的angular的指令,然后想在这 ...

  7. O003、准备 KVM 实验环境

    参考https://www.cnblogs.com/CloudMan6/p/5240770.html   KVM 是 OpenStack 使用的最广泛的Hypervisor,本节介绍如何搭建 KVM  ...

  8. with as 语句

    with就是一个sql片段,供后面的sql语句引用. 详情参见:https://www.cnblogs.com/Niko12230/p/5945133.html

  9. 部署master节点组件

    部署master节点组件 master节点的组件有:kube-apiserver,kube-scheduler,kube-controller-manager 大致安装步骤如下: # mkdir -p ...

  10. 06 Python网络爬虫requets模块高级用法

    一. 基于requests模块的cookie操作 - cookie概念: 当用户通过浏览器访问一个域名的时候,访问的web服务器会给客户端发送数据,以保持web服务器与客户端之间的状态保持,这些数据就 ...