Exemple d'analyse d'un effet similaire super simple implémenté par jQuery_jquery

L'exemple de cet article décrit l'effet like super simple implémenté par jQuery. Il est partagé avec tout le monde pour votre référence. Les détails sont les suivants :

1.HTML (peut être optimisé, essayez d'avoir le moins de balises possible...)

<div id="dianz">
  <b class="cz"><em>1</em><i></i><s></s><u>超赞</u></b>
  <b class="tj"><em>2</em><i></i><s></s><u>推荐</u></b>
  <b class="yb"><em>3</em><i></i><s></s><u>一般</u></b>
  <b class="wl"><em>6</em><i></i><s></s><u>无聊</u></b>
  <b class="lj"><em>5</em><i></i><s></s><u>雷囧</u></b>
</div>

Style 2.css

#dianz{text-align:center; width:610px; overflow:hidden;zoom:1; margin:20px auto;}
#dianz b{ display:inline-block; width:120px; height:215px; float:left; position:relative;}
#dianz b em,#dianz b u,#dianz b i,#dianz b s{display:inline-block; width:100%; height:20px; position:absolute; left:0px;}
#dianz b u{ bottom:0px;}
#dianz b s{ bottom:20px; height:95px;}
#dianz b i{width:20px; height:80px;left:50px; bottom:115px;}
#dianz b.cz s{ background:url(../images/dianz.jpg) 25px 0px no-repeat}
#dianz b.cz i{ background-color:#fe0032;}
#dianz b.tj s{ background:url(../images/dianz.jpg) -105px 0px no-repeat}
#dianz b.tj i{ background-color:#fe9903;}
#dianz b.yb s{ background:url(../images/dianz.jpg) -235px 0px no-repeat}
#dianz b.yb i{ background-color:#99c900;}
#dianz b.wl s{ background:url(../images/dianz.jpg) -370px 0px no-repeat}
#dianz b.wl i{ background-color:#32ccff;}
#dianz b.lj s{ background:url(../images/dianz.jpg) -500px 0px no-repeat}
#dianz b.lj i{ background-color:#3167ff;}

3.js (l'utilisation de js n'est pas très bonne, tout le monde peut mieux l'optimiser)

function o_dianz(){
  var oi=$('#dianz b i'); //获取i;
    oem=$('#dianz b em'); //获取em;
    os=$('#dianz b s');//获取s;
    bl=null;
    osz=null;
    Arr=[];
    Arr2=[];
 function o_mm(){
  oem.each(function(){
      osz=$(this).text();
      Arr.push(osz);
      //console.log(Arr)
     });
  var get_max=Math.max.apply(null,Arr); //获取最大点赞数；
  bl=80/get_max;
  oem.each(function(){
      osz=$(this).text();
      var oi_H=Math.floor(osz*bl);
      Arr2.push(oi_H);
     });
  for(var i=0; i<Arr2.length; i++){
      oi.eq(i).height(Arr2[i]);
      oem.eq(i).css('top',80-Arr2[i]);
    };
   };
   o_mm();
  os.click(function(){ //点赞增加；
      Arr=[];
      Arr2=[];
      osz=$(this).siblings('em').text();
      osz++;
      $(this).siblings('em').text(osz);
      o_mm();
    });
  };
o_dianz();

Bon, le code est posté, c'est super simple. Le principe que j'ai écrit (je ne sais pas s'il y en a un meilleur, et le bug n'a pas été détecté) : définissez la hauteur par défaut de la balise i sur 80px, puis recherchez la valeur texte de chaque em via js, lancez-la dans le tableau Arr, puis passez Cette méthode Math.max.apply(null,Arr), trouve la valeur du texte maximum, puis trouve l'échelle (trouver l'échelle à travers le texte maximum peut garantir que la hauteur ne sera pas supérieur à 80PX), et enfin multiplie la valeur de chaque texte par l'échelle Math .floor(osz*bl), trouve la valeur de hauteur correspondant à chaque em. 0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188aChaque fois que vous cliquez sur l'icône lors de l'événement de clic suivant, Arr et Arr2 sont réinitialisés en conséquence, ce qui garantit que les valeurs sont mises à jour en temps réel. . . OK, c'est par ici,

Résultat final :

J'espère que cet article sera utile à tous ceux qui programment jQuery.