Jquery digital scroll switching plug-in implementation method

This time I will bring you the implementation method of the Jquery digital scrolling switching plug-in. What are the precautions for the implementation of the Jquery digital scrolling switching plug-in. The following is a practical case, let's take a look.

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", Times, serif;
 position: absolute;
}

HTML

<p class="textC"></p>
<p style="text-align:center;"><a style="float:left; margin-left:300px; margin-top:200px;" href="
javascript
:void(0);" onClick="NumbersAnimate.ChangeNumber(NumbersAnimate.RandomNum(10000000,19999999));">随机切换数字</a>
</p>

JS

4786d41b2ac33a5caa2a56cad287436e2cacc6d41bbb37262a98f745aa00fbf0
8019067d09615e43c7904885b5246f0a
$(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.toString().split("");
 //遍历数组
 for(var i=0;i75cb92f7bf8609264153d6a83b84f17954bdf357c58b8a65c66d7c19c8e4d114");
  $(t).append("3fcd39d8fb550df997a2b1abc7c27e52"+array[i]+"54bdf357c58b8a65c66d7c19c8e4d114");
  $(t).css("margin-left",18*i+"px");
  $(NumbersAnimate.Target).append(t);
  //生成滚动数字,根据当前数字大小来定
  for(var j=0;j5d02cf5ca5a84565b6bde0d6cd3446d845a2772a6b6107b401db3c9b82c049c2"+j+"54bdf357c58b8a65c66d7c19c8e4d11454bdf357c58b8a65c66d7c19c8e4d114");
   }else{
   tt=$("3fcd39d8fb550df997a2b1abc7c27e52"+j+"54bdf357c58b8a65c66d7c19c8e4d114");
  }
  $(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=$("45a2772a6b6107b401db3c9b82c049c2"+j+"54bdf357c58b8a65c66d7c19c8e4d114");
    if(j==n){
    nn=$("45a2772a6b6107b401db3c9b82c049c2"+j+"54bdf357c58b8a65c66d7c19c8e4d114");
    }else{
    nn=$("1dc556725595f7f1b136a42294143726"+j+"54bdf357c58b8a65c66d7c19c8e4d114");
    }
    $(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));  
 }
}
2cacc6d41bbb37262a98f745aa00fbf0

The plug-in is very simple to use
1 . When calling for the first time

NumbersAnimate.Target=$(".textC");
NumbersAnimate.Numbers=12389623;
NumbersAnimate.Duration=1500;
NumbersAnimate.Animate();

2. If the number changes, you only need to call the Change function when calling again

NumbersAnimate.ChangeNumber();

The plug-in has 3 parameters, which are:

Target: Parent container of numbers
Numbers: Displayed numbers
Duration: Scrolling speed, unit is milliseconds

Usage Note: Call Change when the number changes method, you need to ensure that the number of digits after the change is consistent with the previous number.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

jquery js gets focus control image

jquery operation animation display and hiding effect

jQuery implements tab sliding switching menu with slide effect

The above is the detailed content of Jquery digital scroll switching plug-in implementation method. For more information, please follow other related articles on the PHP Chinese website!