이 글의 예시는 jQuery로 구현한 매우 간단한 Like 효과를 설명합니다. 자세한 내용은 다음과 같습니다.
1.HTML(최적화 가능, 가능한 한 적은 수의 태그를 사용하도록 노력하세요...)
<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 사용이 별로 좋지 않아 누구나 최적화할 수 있습니다.)
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();
자, 코드가 게시되었습니다. 매우 간단합니다. 제가 쓴 원리(더 좋은게 있는지는 모르겠고, 버그는 발견되지 않았습니다): i 태그의 기본 높이를 80px로 설정한 후, js를 통해 각 em의 텍스트 값을 찾아 던지세요. Arr 배열에 넣은 다음 Math.max.apply(null,Arr) 메소드를 전달하여 최대 텍스트 값을 찾은 다음 스케일을 찾습니다(최대 텍스트를 통해 스케일을 찾으면 높이가 80PX보다 큼), 마지막으로 각 텍스트의 값에 Math .floor(osz*bl) 스케일을 곱하여 각 em에 해당하는 높이 값을 찾습니다.
다음 클릭 이벤트에서 아이콘을 클릭할 때마다 Arr 및 Arr2가 그에 따라 재설정되므로 값이 실시간으로 업데이트됩니다. . . 네, 여기까지입니다
최종 결과:
이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.