相思资源网 Design By www.200059.com
本文实例讲述了jQuery实现的超简单点赞效果,分享给大家供大家参考,具体如下:
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对应的高度值。<br><br>后面的点击事件中每点击一次图标,相对应的重置一次Arr和Arr2,可以保证数值是实时更新的。。。 OK,到这里就完了,
最终结果:
希望本文所述对大家jQuery程序设计有所帮助。
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无jQuery实现的超简单点赞效果实例分析的评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。