这是关于数字加载的一个动画，从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. Java闭包和回调

    Java中的闭包与回调可以通过成员内部类来实现. 简单的来说闭包就是返回一个内部类对象,这个内部类对象包含了外部类对象的信息(因为一个内部类对象定依托于一个外部类对象). 回调就是在闭包的基础上实现的 ...

  2. java-循环变量定义问题

    第15行,这样就会报错.

  3. SQLite扫描

    SQLite的扫盲 SQLite的是一种嵌入式数据库,它的数据库就是一个文件.由于SQLite的本身是Ç写的,而且体积很小,所以经常被集成到各种应用程序中,主要在手机的应用中使用. 之前没有遇到过关于 ...

  4. Git_mergetool_tutorial（转载）

    原文链接:https://gist.github.com/karenyyng/f19ff75c60f18b4b8149#table-of-content Table Of Content Skip t ...

  5. 4 基于优化的攻击——CW

    CW攻击原论文地址——https://arxiv.org/pdf/1608.04644.pdf 1.CW攻击的原理 CW攻击是一种基于优化的攻击,攻击的名称是两个作者的首字母.首先还是贴出攻击算法的公 ...

  6. PowerShell学习记录

    一.简介——连接 Powershell 是运行在windows机器上实现系统和应用程序管理自动化的命令行脚本环境.你可以把它看成是命令行提示符cmd.exe的扩充,不对,应当是颠覆. powershe ...

  7. Linux基础训练题型（下）

    8.在题3的基础上,使用命令调换passwd文件里root位置和/bin/bash位置?即将所有的第一列和最后一列位置调换? 例: 默认:root:x:0:0:root:/root:/bin/bash ...

  8. Python全栈开发之2、数据类型-数值、字符串、列表、字典、元组和文件处理

    一.Python 运算符 1.算术运算: 2.比较运算: 3.赋值运算: 4.逻辑运算: 5.成员运算: 二.基本数据类型 1.数字整型 int(整型) 在32位机器上,整数的位数为32位,取值范围为 ...

  9. PTA(Basic Level)1030.完美数列

    给定一个正整数数列,和正整数 p,设这个数列中的最大值是 M,最小值是 m,如果 M≤*m**p*,则称这个数列是完美数列. 现在给定参数 p 和一些正整数,请你从中选择尽可能多的数构成一个完美数列. ...

  10. Django在使用Mysql迁移数据库时,会报的错

    settings : DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'firstproject', ...