Heim  >  Artikel  >  Web-Frontend  >  Jquery-Nummer scrollen nach oben und unten, dynamisches Umschalten von plug-in_jquery

Jquery-Nummer scrollen nach oben und unten, dynamisches Umschalten von plug-in_jquery

WBOY
WBOYOriginal
2016-05-16 15:46:131835Durchsuche

Das von Jq erstellte Plug-In für digitales Scrollen kann dynamisch scrollen und wechseln, wenn sich die Zahlen ändern, und der Effekt ist sehr gut.

Schauen wir uns zunächst ein 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

Code kopieren Der Code lautet wie folgt:
8eead21998c97c029cbf7d633641f049950c0e09a208ea6a6c67c615a801fbc6
dec736f7546d3082d45bbf108c4de98aa78ecce5087cb62a83d9a84fa05fcb78Zahlen nach dem Zufallsprinzip wechseln5db79b134e9f6b82c0b36e0489ee08ed
94b3e26ee717c64999d7867364b1b4a3

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.toString().split("");
 //遍历数组
 for(var i=0;i<array.length;i++){
  var currentN=array[i];
  //数字append进容器
  var t=$("<span></span>");
  $(t).append("<span class=\"childNumber\">"+array[i]+"</span>");
  $(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+"</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>

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 nur die Funktion Ändern erneut aufrufen

NumbersAnimate.ChangeNumber();

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

Ziel: der übergeordnete Zahlencontainer
Zahlen: Angezeigte Zahlen
Dauer: Scrollgeschwindigkeit in Millisekunden

Verwendungshinweis: Wenn Sie die Change-Methode aufrufen, nachdem eine Zahl geändert wurde, müssen Sie sicherstellen, dass die geänderte Zahl mit der vorherigen Ziffernzahl übereinstimmt.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn