可以加一些复杂样式的数字动画

摘要：效果图需引入的使用方法

效果图：

需引入的JS

;(function($, window, document, undefined) {
    var leoTextAnimate = function(eles, opts) {
        this.element = $(eles);
        this.string = $(eles).html();
        this.defaults = {
            speed: 1000,
            autorun: true,
            delay: 0,
            fixed: "",
            start: ""
        };
        this.options = $.extend({}, this.defaults, opts);
        this.height = $(eles).height();
    }
    leoTextAnimate.prototype = {
        init: function() {
            if (this.element.find(".TextAnimate").length <= 0) {
                var html = method.getHtml(this.options, this.string);
                this.element.html(html);
            }
            this.reset();
            if (this.options.autorun) {
                if (this.options.delay == 0) {
                    this.run();
                } else {
                    var $this = this;
                    setTimeout(function() {
                        $this.run();
                    },
                    this.options.delay);
                }
            }
        },
        reset: function() {
            var $this = this.element.find(".TextAnimate");
            $this.css({
                "overflow": "hidden",
                "display":"inline-block",
                "vertical-align":"top",
                "height": this.height
            }).find("span").css({
                "display": "inline-block",
                "vertical-align": "top",
                "position": "relative",
                "top": "0px",
                "transform": "translateY(0px)",
                "-ms-transform": "translateY(0px)",
                "-moz-transform": "translateY(0px)",
                "-webkit-transform": "translateY(0px)",
                "-o-transform": "translateY(0px)",
                "-ms-transition": "0s",
                "-moz-transition": "0s",
                "-webkit-transition": "0s",
                "-o-transition": "0s",
                "transition": "0s"
            }).find("i").css({
                "display": "block",
                "font-style": "normal",
                "height": this.height
            });
        },
        run: function() {
            var speed = this.options.speed;
            var height = this.height;
            this.reset();
            this.element.find("span").each(function() {
                var $this = $(this);
                var length = $this.find("i").index($this.find(".on"));
                var to = -length * height + "px";
                if (to != $this.css("top")) {
                    if (!window.applicationCache) {
                        $this.animate({
                            top: to
                        },
                        speed);
                    } else {
                        $this.css({
                            "transform": "translateY(" + to + ")",
                            "-ms-transform": "translateY(" + to + ")",
                            "-moz-transform": "translateY(" + to + ")",
                            "-webkit-transform": "translateY(" + to + ")",
                            "-o-transform": "translateY(" + to + ")",
                            "-ms-transition": speed / 1000 + "s",
                            "-moz-transition": speed / 1000 + "s",
                            "-webkit-transition": speed / 1000 + "s",
                            "-o-transition": speed / 1000 + "s",
                            "transition": speed / 1000 + "s"
                        });
                    }
                }
            });
        }
    }
    var method = {
        getNumber: function(options, string) {
            if(!this.inArr(options.fixed, string)) {
                var text = "";
                if (options.start !== "") {
                    text += "" + options.start + "";
                }
                for (var i = 0; i < 10; i++) {
                    text += "" + i + "";
                }
                return text + "";
            } else {
                return "" + string + "";
            }
        },
        getLowerCase: function(options, string, code) {
            if (!this.inArr(options.fixed, string)) {
                var text = "";
                if (options.start !== "") {
                    text += "" + options.start + "";
                }
                for (var i = 0; i < 26; i++) {
                    text += "" + String.fromCharCode(97 + i) + "";
                }
                return text + "";
            } else {
                return "" + string + "";
            }
        },
        getUpperCase: function(options, string, code) {
            if (!this.inArr(options.fixed, string)) {
                var text = "";
                if (options.start !== "") {
                    text += "" + options.start + "";
                }
                for (var i = 0; i < 26; i++) {
                    text += "" + String.fromCharCode(65 + i) + "";
                }
                return text + "";
            } else {
                return "" + string + "";
            }
        },
        getUnicode: function(options, string, code) {
            if (!this.inArr(options.fixed, string)) {
                var text = "";
                if (options.start !== "") {
                    text += "" + options.start + "";
                }
                for (var i = (code - this.getRand(2, 7)); i < (code + this.getRand(3, 10)); i++) {
                    text += "" + String.fromCharCode(i) + "";
                }
                return text + "";
            } else {
                return "" + string + "";
            }
        },
        getHtml: function(options, string) {
            var html = "
"
            for (var i = 0; i < string.length; i++) {
                var text = string.substr(i, 1);
                var code = text.charCodeAt();
                if (code > 47 && code < 58) {
                    html += this.getNumber(options, text);
                } else if (code > 64 && code < 91) {
                    html += this.getUpperCase(options, text, code);
                } else if (code > 96 && code < 123) {
                    html += this.getLowerCase(options, text, code);
                } else {
                    html += this.getUnicode(options, text, code);
                }
            }
            return html + "
";
        },
        getRand: function(minnum, maxnum) {
            return Math.floor(minnum + Math.random() * (maxnum - minnum));
        },
        inArr: function(arr,str){
            for(var i=0;i
使用方法：
$("#totalnum").html("2,423");
$("#totalnum").leoTextAnimate({
        fixed: [",", ":", "."],
        start: "0"
    });