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

<script></script>
<script>
$(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;i<array.length;i++){
  var currentN=array[i];
  //数字append进容器
  var t=$("<span>");
  $(t).append("<span class=\"childNumber\">"+array[i]+"");
  $(t).css("margin-left",18*i+"px");
  $(NumbersAnimate.Target).append(t);
  //生成滚动数字,根据当前数字大小来定
  for(var j=0;j<=currentN;j++){
  var tt;
  if(j==currentN){
   tt=$("<span class=\"main\"><span>"+j+"");
   }else{
   tt=$("<span class=\"childNumber\">"+j+"");
  }
  $(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(&#39;px&#39;, &#39;&#39;)); 
   
   for(var j=0;j<=n;j++){
    var nn=$("<span>"+j+"");
    if(j==n){
    nn=$("<span>"+j+"");
    }else{
    nn=$("<span class=\"yy\">"+j+"");
    }
    $(c).append(nn);
    $(nn).css("margin-top",(j+1)*25+top+"px");
   }
   var margintop=parseInt($(c).css("marginTop").replace(&#39;px&#39;, &#39;&#39;)); 
   $(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>

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!