Rumah > hujung hadapan web > tutorial js > Contoh analisis kesan seperti super mudah yang dilaksanakan oleh jQuery_jquery

Contoh analisis kesan seperti super mudah yang dilaksanakan oleh jQuery_jquery

WBOY
Lepaskan: 2016-05-16 15:22:29
asal
1247 orang telah melayarinya

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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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.

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan