Contoh analisis kesan seperti super mudah yang dilaksanakan oleh jQuery_jquery

Contoh dalam artikel ini menerangkan kesan seperti yang sangat mudah yang dilaksanakan oleh jQuery Ia dikongsi dengan semua orang untuk rujukan anda:

1.HTML (boleh dioptimumkan, cuba gunakan tag sesedikit mungkin...)

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

gaya 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 (penggunaan js tidak begitu baik, semua orang boleh mengoptimumkannya dengan lebih baik)

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

Baiklah, kod itu disiarkan, ia sangat mudah. Prinsip yang saya tulis (saya tidak tahu jika ada yang lebih baik, dan pepijat belum dikesan): Tetapkan ketinggian lalai tag i kepada 80px, kemudian cari nilai teks setiap em melalui js, buangnya ke dalam Arr tatasusunan, dan kemudian lulus Kaedah ini Math.max.apply(null,Arr), mencari nilai teks maksimum, dan kemudian mencari skala (mencari skala melalui teks maksimum boleh memastikan bahawa ketinggian tidak akan lebih besar daripada 80PX), dan akhirnya mendarabkan nilai setiap teks dengan skala Math .floor(osz*bl), cari nilai ketinggian yang sepadan dengan setiap em. 0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188aSetiap kali ikon diklik dalam acara klik berikutnya, Arr dan Arr2 ditetapkan semula dengan sewajarnya, yang memastikan bahawa nilai dikemas kini dalam masa nyata. . . OK, sudah sampai di sini,

Keputusan akhir:

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.