码迷,mamicode.com
首页 > 其他好文 > 详细

jq 数字滚动兼容小数

时间:2019-12-25 15:45:38      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:prot   eof   eset   func   data   turn   reset   jquery   dom   

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

jq 数字滚动兼容小数

标签:prot   eof   eset   func   data   turn   reset   jquery   dom   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!