首页 > Web开发 > 详细

关于数字加载的动画 jquery

时间:2015-11-11 17:55:27      阅读:247      评论:0      收藏:0      [点我收藏+]

这是关于数字加载的一个动画,从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

原文:http://www.cnblogs.com/cyj7/p/4956634.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!