效果图：
需引入的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'
});