效果图：
需引入的 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 = '<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 class="spot">' + options.start + '</i>';}
for (var i = (code - this.getRand(2, 7)); i < (code + this.getRand(3, 10)); i++) {text += '<i' + (i == code ? 'class="on spot"':'') + '>' + String.fromCharCode(i) + '</i>';
}
return text + '</span>';
} else {return '<span><i class="on spot">' + 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) {$(this).each(function(){var plugin = $._data(this, "leoTextAnimate");
if(!plugin){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);使用方法：
$("#totalnum").html("2,423");
$('#totalnum').leoTextAnimate({fixed: [',', ':', '.'],
start: '0'
});