An example analysis of the super simple point-praise effect of jquery _jquery

This article describes the jquery implementation of the super simple point of praise effect, share for everyone to reference, specific as follows:

1.HTML (can be optimized, as few tags as possible ...) ）

<div id= "Dianz" >
  <b class= "CZ" ><em>1</em><i></i><s></s><u > Super </u></b>
  <b class= "TJ" ><em>2</em><i></i><s></s> <u> recommendation </u></b>
  <b class= "YB" ><em>3</em><i></i><s></ S><u> General </u></b>
  <b class= "WL" ><em>6</em><i></i><s> </s><u> boredom </u></b>
  <b class= "LJ" ><em>5</em><i></i>< s></s><u> Rei </u></b>
</div>

2.CSS style

#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:115p
x;} #dianz b.cz s{background:url (... /images/dianz.jpg) 25px 0px no-repeat} #dianz b.cz i{background-color: #fe0032;} #dianz b.tj s{(. /images/dianz.jpg) -105px 0px no-repeat} #dianz b.tj i{background-color: #fe9903;} #dianz b.yb s{(.. /images/dianz.jpg) -235px 0px no-repeat} #dianz b.yb i{background-color: #99c900;} #dianz b.wl s{(.. /images/dianz.jpg) -370px 0px no-repeat} #dianz b.wl i{background-color: #32ccff;} #dianz B.lj s{(..

 /images/dianz.jpg) -500px 0px no-repeat} #dianz b.lj i{background-color: #3167ff;}

3.js (the use of JS is not very good, we can optimize the better some)

function O_dianz () {
  var oi=$ (' #dianz b i ');//Get i;
    oem=$ (' #dianz b em '); Get em;
    os=$ (' #dianz b S ');//get 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); To obtain the maximum point of praise;
  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 () {//point praise Increase;
      arr=[];
      Arr2=[];
      osz=$ (This). Siblings (' em '). text ();
      osz++;
      $ (this). Siblings (' em '). Text (Osz);
      O_MM ();
    });
O_dianz ();

Well, the code is posted, super simple. I write the principle (do not know if there is no better, and bugs are not detected): Set I label the default height of 80px, and then through JS to find out each of the EM text value, throw into the array Arr, and then through this method Math.max.apply (Null,arr), To find the maximum text value, and then find the scale (through the maximum text to find the scale can ensure that the height will not be greater than 80PX), and finally through each text value multiplied by the scale Math.floor (OSZ*BL), find out each em corresponding height value. <br><br> behind the click of the event every click on the icon, the corresponding reset once arr and ARR2, you can ensure that the value is real-time update ... OK, it's over here.

Final Result:

I hope this article will help you with the jquery program design.