jq 数字滚动兼容小数

Posted 2021-03-20 duhui

html

<div class="number"></div>

js

$(‘.number‘).text("999");  // 设置页面中要显示的数字
$(‘.number‘).leoTextAnimate({delay:200,autorun:true,fixed:[‘,‘,‘:‘,‘.‘],start:‘-‘});

// 单独的js文件
;(function($, window, document, undefined) {
    var leoTextAnimate = function(eles, opts) {
        this.element = $(eles);
        this.string = $(eles).html();
        this.defaults = {
            speed: 200,
            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);
                }
            }
        },
        reload: function() {
            if(this.options.text){
                this.string = this.options.text;
                this.element.html(this.options.text);
            }
            this.init();
        },
        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 / 200 + ‘s‘,
                            ‘-moz-transition‘: speed / 200 + ‘s‘,
                            ‘-webkit-transition‘: speed / 200 + ‘s‘,
                            ‘-o-transition‘: speed / 200 + ‘s‘,
                            ‘transition‘: speed / 200 + ‘s‘
                        });
                    }
                }
            });
        }
    }
    var method = {
        getNumber: function(options, string) {
            if(!this.inArr(options.fixed, string)) {
                var text = ‘<span>‘;
                if (options.start !== ‘‘) {
                    text += ‘<i>‘ + options.start + ‘</i>‘;
                }
                for (var i = 0; i < 10; i++) {
                    text += ‘<i‘ + (i == string ? ‘ class="on"‘: ‘‘) + ‘>‘ + i + ‘</i>‘;
                }
                return text + ‘</span>‘;
            } else {
                return ‘<span><i class="on">‘ + string + ‘</i></span>‘;
            }
        },
        getLowerCase: function(options, string, code) {
            if (!this.inArr(options.fixed, string)) {
                var text = ‘<span>‘;
                if (options.start !== ‘‘) {
                    text += ‘<i>‘ + options.start + ‘</i>‘;
                }
                for (var i = 0; i < 26; i++) {
                    text += ‘<i‘ + (97 + i == code ? ‘ class="on"‘: ‘‘) + ‘>‘ + String.fromCharCode(97 + i) + ‘</i>‘;
                }
                return text + ‘</span>‘;
            } else {
                return ‘<span><i class="on">‘ + string + ‘</i></span>‘;
            }
        },
        getUpperCase: function(options, string, code) {
            if (!this.inArr(options.fixed, string)) {
                var text = ‘<span>‘;
                if (options.start !== ‘‘) {
                    text += ‘<i>‘ + options.start + ‘</i>‘;
                }
                for (var i = 0; i < 26; i++) {
                    text += ‘<i‘ + (65 + i == code ? ‘ class="on"‘: ‘‘) + ‘>‘ + String.fromCharCode(65 + i) + ‘</i>‘;
                }
                return text + ‘</span>‘;
            } else {
                return ‘<span><i class="on">‘ + string + ‘</i></span>‘;
            }
        },
        getUnicode: function(options, string, code) {
            if (!this.inArr(options.fixed, string)) {
                var text = ‘<span>‘;
                if (options.start !== ‘‘) {
                    text += ‘<i>‘ + options.start + ‘</i>‘;
                }
                for (var i = (code - this.getRand(2, 7)); i < (code + this.getRand(3, 10)); i++) {
                    text += ‘<i‘ + (i == code ? ‘ class="on"‘: ‘‘) + ‘>‘ + String.fromCharCode(i) + ‘</i>‘;
                }
                return text + ‘</span>‘;
            } else {
                return ‘<span><i class="on">‘ + string + ‘</i></span>‘;
            }
        },
        getHtml: function(options, string) {
            var html = ‘<div class="TextAnimate">‘
            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 + ‘</div>‘;
        },
        getRand: function(minnum, maxnum) {
            return Math.floor(minnum + Math.random() * (maxnum - minnum));
        },
        inArr: function(arr,str){
            for(var i=0;i<arr.length;i++){
                if(arr[i].indexOf(str)!==-1){
                    return true;
                }
            }
            return false;
        }
    }
    $.fn.leoTextAnimate = function(options,options2) {
        $(this).each(function(){
            var plugin = $._data(this, "leoTextAnimate");
            if(options2){
                var opts = $.extend(true, {}, $.fn.leoTextAnimate.defaults, typeof options2 === "object" ? options2 : {});
            } else {
                var opts = $.extend(true, {}, $.fn.leoTextAnimate.defaults, typeof options === "object" ? options : {});
            }
            plugin = new leoTextAnimate(this, opts);
            $._data(this, "leoTextAnimate", plugin);
            if (plugin[options]) {
                return plugin[options].apply(plugin, Array.prototype.slice.call(arguments, 1));
            } else if (typeof options === ‘object‘ || !options) {
                return plugin.init();
            } else {
                $.error(‘Method ‘ + options + ‘ does not exist on jQuery.leoTextAnimate‘);
            }
            return this;
        });
    };
})(jQuery, window, document);