Méthode de mise en œuvre du plug-in de commutation de défilement numérique Jquery

Cette fois, je vais vous présenter la méthode d'implémentation du plug-in de commutation de défilement numérique Jquery. Quelles sont les précautions pour implémenter le plug-in de commutation de défilement numérique Jquery. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Regardons d'abord l'exemple :

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

Plugin utilisation Très simple
1. Lors du premier appel

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

2. Si le numéro change, il vous suffit d'appeler la fonction Changer lors d'un nouvel appel

NumbersAnimate.ChangeNumber();

. Le plug-in possède 3 paramètres, à savoir :

Cible : le conteneur parent des nombres
Nombres : le nombre affiché
Durée : vitesse de défilement, l'unité est la milliseconde

Remarque d'utilisation : lorsque vous appelez la méthode Change après qu'un numéro a été modifié, vous devez vous assurer que le numéro modifié est cohérent avec le nombre de chiffres précédent.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

jquery+js obtient une image de contrôle du focus

affichage de l'animation de l'opération jquery et effets de masquage

jQuery implémente un menu de changement d'onglet coulissant avec effet de diapositive

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!