前端开发 jQuery 点赞效果

jquery前端开发工程师 会的|jquery 游戏web前端开发|前端开发在uc浏览器有的问题
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();
好了,代码都贴上来了,超级简单的。我写的原理(不知道是不是有更好的,同时bug也没有检测):设置i标签的默认高度为80px,然后通过js求出每一个em的text数值,丢入数组Arr中,再通过这个方法Math.max.apply(null,Arr),求最大text的数值,进而求出比例尺(通过最大text求出比例尺可以保证高度不会大于80PX),最后通过每一个text的数值乘以比例尺Math.floor(osz*bl),求出每一个em对应的高度值。
后面的点击事件中每点击一次图标,相对应的重置一次Arr和Arr2,可以保证数值是实时更新的;
web前端的整个开发流程|前端开发模板引擎|web前端模块化开发论文
» 本文来自:前端开发者 » 《前端开发 jQuery 点赞效果》
» 本文链接地址:https://www.rokub.com/5060.html
» 您也可以订阅本站:https://www.rokub.com
赞(3)
64K

评论 抢沙发

评论前必须登录!