标题 | jQuery 实现评论等级好评差评特效 |
内容 | 本文主要介绍如何实现类似淘宝好评差评的效果,需要的小伙伴直接拿去用吧。 代码如下: <style> .maxdiv div{ height:10px; width:20px; border:1px solid #000; float:left; margin:20px 2px 0px 5px; } </style> 代码如下: <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <span></span> 最后大家看下JS 上边小编已经把注释都注上了,其实也不难,主要是加深理解.. 代码如下: $(function(){ $(".maxdiv div").bind("hover",function(){ $(this).attr("style","background:red");//当前div加上style="background:red"; $("div:last").prevAll().attr("style","background:red");//给所有的都加上样式; $(this).nextAll().attr("style","");//当前div后的所有所有样式都为""; var dsize=$("div [style ='background:red']").size();//获得所有背景含有style="background:red"的个数; if(dsize==1) { $('span').text("很差"); } else if(dsize==2) { $('span').text("差"); } else if(dsize==3) { $('span').text("一般"); } else if(dsize==4) { $('span').text("好"); } else if(dsize==5) { $('span').text("很好"); } }); }); 个人能力有限,做的不是太美观,有需要的朋友可以拿去再美化一下,呵呵。 |
随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。