Implementierungsmethode des Jquery Digital Scroll Switching-Plug-Ins

Dieses Mal werde ich Ihnen die Implementierungsmethode des JQuery Digital Scrolling Switching Plug-Ins vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung des JQuery Digital Scrolling Switching Plug-Ins? Werfen wir einen Blick darauf.

Schauen wir uns zuerst das Beispiel an:

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

Das Plug-in ist sehr einfach zu verwenden
1 . Beim ersten Anruf

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

2. Wenn sich die Nummer ändert, müssen Sie bei einem erneuten Anruf nur die Funktion „Ändern“ aufrufen

NumbersAnimate.ChangeNumber();

Das Plug-in hat 3 Parameter, nämlich:

Ziel: der übergeordnete Zahlencontainer
Zahlen: die angezeigten Zahlen
Dauer: Scrollgeschwindigkeit, in Millisekunden

Nutzungshinweis : Rufen Sie Change auf, wenn sich die Nummer ändert. Sie müssen sicherstellen, dass die Anzahl der Ziffern nach der Änderung mit der vorherigen Nummer übereinstimmt.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

jquery+js ruft das Bild zur Fokussteuerung ab

JQuery-Betriebsanimationsanzeige und Ausblendungseffekte

jQuery implementiert ein Tab-Schiebemenü mit Schiebeeffekt

Das obige ist der detaillierte Inhalt vonImplementierungsmethode des Jquery Digital Scroll Switching-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!