Jquery 数字滚动兼容小数

时间:2019-12-25
本文章向大家介绍Jquery 数字滚动兼容小数,主要包括Jquery 数字滚动兼容小数使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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);

原文地址:https://www.cnblogs.com/duhui/p/12096966.html