These days free to write, there is no wrong place also please a lot of guidance
Css:
. digital-beating{Display:Inline-block;margin:0;padding:0 2px;}. digital-beating I{Display:Inline-block;width:17px;Height:30px;margin:0;padding:0;background:URL (.. /images/icon_0-9.jpg) no-repeat 0 0;text-align:Center;Line-height:30px;}. digital-beating I.D{background-position:-4px-300px;width:9px;}
Html:
<spanID= "Char_count1"class= "Digital-beating"Data-num= "212.0555"></span><BR/> <spanID= "Char_count2"class= "Digital-beating"Data-num= "123456"></span><BR/> <spanID= "Char_count3"class= "Digital-beating"Data-num= "212.0555"></span><BR/>
Js:
/** * JQuery plugin dbeat () * Function: Digital scrolling * version:0.3 * author:cymmint * date:2015-02-13 10:50 */;(function($){ //support for Firefox backgroundposition plugin$.extend ($.fx.step,{backgroundposition:function(FX) {if(Fx.pos = = 0 &&typeofFx.end = = ' String ') { varStart = $.css (Fx.elem, ' backgroundposition ')); Start=ToArray (start); Fx.start= [start[0],start[2]]; varEnd =ToArray (fx.end); Fx.end= [end[0],end[2]]; Fx.unit= [End[1],end[3]]; } varNOWPOSX = []; nowposx[0] = ((Fx.end[0]-fx.start[0]) * Fx.pos) + fx.start[0] + fx.unit[0]; nowposx[1] = ((fx.end[1]-fx.start[1]) * Fx.pos) + fx.start[1] + fx.unit[1]; Fx.elem.style.backgroundPosition= Nowposx[0]+ ' +nowposx[1]; functionToArray (STRG) {STRG= Strg.replace (/left|top/g, ' 0px ')); STRG= Strg.replace (/right|bottom/g, ' 100% ')); STRG= Strg.replace (/([0-9\.] +) (\s|\) |$)/g, "$1px$2"); varres = Strg.match (/(-?[ 0-9\.] +) (px|\%|em|pt) \s (-?[ 0-9\.] +) (PX|\%|EM|PT)/); return[Parsefloat (res[1],10), Res[2],parsefloat (res[3],10), res[4]]; } } }); //Digital Beating plugin$.fn.dbeat =function(opts) {vardefine ={loop:true,//Cyclic scrolling | number of cycles, [true|false| positive integer]Real:true,//Real Datadec:0,//Number of decimal digitsHigh:30,//Digital Line height, u.pxrange:1000,//Auto-increment interval, when Real is true, the range value is discardedtime:3000,//cyclic scrolling interval time, u.msspeed:1000,//Digital scrolling speed, this parameter must be less than time u.mst_out:0//Clear Loops }; OPTs=$.extend ({}, define, opts); varMethods ={getnum:function(_this) {//Get Data number varnum = _this.data ("num"); Num= IsNaN (num)? 0:num*1; returnnum.tofixed (OPTS.DEC); }, Getrandom:function() {//Random varr = Opts.range = =NULL|| Opts.range = = "" | | IsNaN (opts.range)? 1000: Opts.range; returnMath.random () * (R + 1)); }, Beat:function(_this) {//Number beating_this.find ("I:not ('. D,. E ')"). each (function(){ varSelf = $ ( This), Data= {}; if(Navigator.userAgent.toLocaleLowerCase (). Match (/firefox/)! =NULL) {data.backgroundposition= "0-" + self.attr ("num") * opts.high + "px"; } Else{data.backgroundpositiony=-self.attr ("num") *Opts.high; } self.animate (data, opts.speed); }); }, SetLabel:function(_this, NUM) {//Set in the digital DOM varTag = _this.find ("I"), Len= Tag.length-num.length, HTM= ""; if(Len > 0) {_this.find ("I:lt (" + len + ")"). Remove (); Tag= _this.find ("I"); } Len=tag.length; for(varI=num.length-1; i>=0; i--) { if(len--> 0) { if(Num.charat (i) = = ".") {tag.eq (len). attr ("Num", 10); } Else { if(Num.charat (i) = = Tag.eq (len). attr ("num") {tag.eq (len). addclass (E); } Else{tag.eq (len). attr ("Num", Num.charat (i)); Tag.eq (len). Removeclass (E); } } } Else { if(Num.charat (i) = = ".") {htm= ' <i class= "D" num= "></i>" +htm; } Else{htm= ' <i num= ' + num.charat (i) + ' "></i> ' +htm; }}} _this.prepend (HTM); }, Main:function(_this) {varnum = This. Getnum (_this);//Real Data scrolling if(!opts.real) {//Pseudo Data scrollingnum = (num*1 + This. Getrandom () * *). toFixed (OPTS.DEC); } _this.data ("Num", num); This. SetLabel (_this, num); This. Beat (_this); if(Opts.real &&typeofOpts.data = = = "function") {opts.data.call (_this); } if(opts.loop) {opts.t_out= SetTimeout (function() {methods.main (_this); }, Opts.time); } if(/^\d+$/.test (opts.loop) &&!--opts.loop) {cleartimeout (opts.t_out); } } }; return This. each (function(){ var_this = $ ( This); Methods.main (_this); }); };}) (jQuery);Plugin JS
Call:
$(function(){ $("#char_Count1"). Dbeat ({dec:2, Loop:true, Real:false, Time:3000, Data:function(){ varnum = 0; Num= Getrandom ();//Pseudo-Ajax dynamic acquisition of data$( This). Data ("num", num); } });}); functionGetrandom () {varR = 100000; returnMath.random () * (R + 1));}
Img:
JQuery Digital Scrolling Plugin