jquery digital up and down scrolling dynamic switch plugin _jquery

JQ to create digital scrolling plug-ins, the number changes, dynamic scrolling switch, the effect is very good.

Let's look at the example first:

Css

. textc {
 position:absolute;
 width:500px;
 Overflow:hidden;
 margin-top:100px;
 line-height:30px;
 margin-left:300px;
 height:30px
}
. TEXTC span {
 color: #13BEEC;
 font-size:28px;
 Font-weight:bold;
 Font-family:georgia, "Times New Roman", the Times, serif;
 Position:absolute;
}

Html

Copy Code code as follows:

<div class= "TEXTC" ></div>
<p style= "Text-align:center;" ><a style= "Float:left; margin-left:300px; margin-top:200px "href=" javascript:void (0); "onclick=" Numbersanimate.changenumber ( 10000000,19999999)); " > Random Switching numbers </a>
</p>

Js

<script src= "Http://libs.baidu.com/jquery/2.0.0/jquery.min.js" ></script> <script type= "text/"
 JavaScript "> $ (function () {numbersanimate.target=$ (". TEXTC ");
 numbersanimate.numbers=12389623;
 numbersanimate.duration=1500;
Numbersanimate.animate ();
}); var numbersanimate={target:null, numbers:0, duration:500, Animate:function () {var array=numbersanimate.numbers.tostr
 ING (). Split ("");
  Traversal array for (Var i=0;i<array.length;i++) {var currentn=array[i];
  Digital append into the container var t=$ ("<span></span>");
  $ (t). Append ("<span class=\" Childnumber\ ">" +array[i]+ "</span>");
  $ (t). css ("Margin-left", 18*i+ "px");
  $ (numbersanimate.target). Append (t);
  Generates a scrolling number, based on the current number size, for a for (Var j=0;j<=currentn;j++) {var tt;
   if (J==CURRENTN) {tt=$ ("<span class=\" main\ "><span>" +j+ "</span></span>");
  }else{tt=$ ("<span class=\" Childnumber\ ">" +j+ "</span>");
  } $ (T). Append (TT);
  $ (TT). CSS ("Margin-top", (j+1) *25+ "px");
}  $ (t). Animate ({margintop:-((parseint (CURRENTN) +1) *25) + "px"},numbersanimate.duration,function () {$ (this). Find (".
  Childnumber "). Remove ();
 });
 }, Changenumber:function (numbers) {var oldarray=numbersanimate.numbers.tostring (). Split ("");
 var newarray=numbers.tostring (). Split ("");
  for (Var i=0;i<oldarray.length;i++) {var o=oldarray[i];
  var n=newarray[i];
        if (o!=n) {var c=$ ($ (". Main") [i]);
   var Num=parseint ($ (c). html ()); 
   
   var Top=parseint ($ (c). FIND ("span") [0]). CSS ("margintop"). Replace (' px ', '));
    for (Var j=0;j<=n;j++) {var nn=$ ("<span>" +j+ "</span>");
    if (j==n) {nn=$ ("<span>" +j+ "</span>");
    }else{nn=$ ("<span class=\" yy\ ">" +j+ "</span>");
    $ (c). append (NN);
   $ (NN). CSS ("Margin-top", (j+1) *25+top+ "px"); 
   var Margintop=parseint ($ (c). CSS ("margintop"). Replace (' px ', ')); $ (c). Animate ({margintop:-((parseint (n) +1) *25) +margintop+ "px"},numbersanimate.duration,function () {$ (this). fIND ("span") [0]). Remove ();
   $ (". yy"). Remove ();
  });
 }} numbersanimate.numbers=numbers;  
    }, Randomnum:function (m,a) {var Range = a-m;  
    var Rand = Math.random ();  
 Return (M + math.round (Rand * Range));

 }} </script>

Plug-ins are very simple to use
1. The first time it was invoked

numbersanimate.target=$ (". TEXTC");
numbersanimate.numbers=12389623;
numbersanimate.duration=1500;
Numbersanimate.animate ();

2. If the number changes, call again only need to call the change function

Numbersanimate.changenumber ();

The plug-in has 3 parameters, respectively:

Target: Parent Container for numbers
Numbers: The number displayed
Duration: Scrolling speed, Unit is milliseconds

Note: When you call the change method when the number changes, you need to ensure that the changed number is consistent with the number of digits that preceded it.