Méthode de mise en œuvre du plug-in de commutation de défilement numérique Jquery-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-04-26 17:10:17

original

1873 Les gens l'ont consulté

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;
}

Copier après la connexion

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>

Copier après la connexion

<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(&#39;px&#39;, &#39;&#39;)); 
   
   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(&#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>

Copier après la connexion

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

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

Copier après la connexion

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

NumbersAnimate.ChangeNumber();

Copier après la connexion

. 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!