快捷導(dǎo)航

jQuery實(shí)現(xiàn)的超簡單點(diǎn)贊效果實(shí)例分析

更新時間：2015年12月31日 12:22:21 作者：w2bc

這篇文章主要介紹了jQuery實(shí)現(xiàn)的超簡單點(diǎn)贊效果,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)點(diǎn)贊功能的具體步驟與相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)的超簡單點(diǎn)贊效果，分享給大家供大家參考，具體如下：

1.HTML（可以優(yōu)化一下，盡量少些幾個標(biāo)簽.....）

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

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（對js運(yùn)用的不是非常好，大家可以優(yōu)化的更好一些）

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); //獲取最大點(diǎn)贊數(shù)；
  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(){ //點(diǎn)贊增加；
      Arr=[];
      Arr2=[];
      osz=$(this).siblings('em').text();
      osz++;
      $(this).siblings('em').text(osz);
      o_mm();
    });
  };
o_dianz();

好了，代碼都貼上來了，超級簡單的。我寫的原理（不知道是不是有更好的，同時bug也沒有檢測）:設(shè)置i標(biāo)簽的默認(rèn)高度為80px,然后通過js求出每一個em的text數(shù)值，丟入數(shù)組Arr中，再通過這個方法Math.max.apply(null,Arr)，求最大text的數(shù)值，進(jìn)而求出比例尺（通過最大text求出比例尺可以保證高度不會大于80PX），最后通過每一個text的數(shù)值乘以比例尺M(jìn)ath.floor(osz*bl)，求出每一個em對應(yīng)的高度值。<br><br>后面的點(diǎn)擊事件中每點(diǎn)擊一次圖標(biāo)，相對應(yīng)的重置一次Arr和Arr2,可以保證數(shù)值是實(shí)時更新的。。。 OK,到這里就完了，