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

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

WBOY

Libérer： 2016-05-16 15:22:29

original

1214 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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();

Copier après la connexion

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.

Chaque 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,