星级评分效果 -js实现

 由于本周的任务是实现文档评论功能，以前同事采用一个combox来通过下拉从0自增1到100来给定分数，不过感觉不是太美观，所以网上搜了一下找到这个星级评分的实现：

转自： http://nofunc.org/AJAX_Star_Rating/

About Code News

Minimal, yet complete. How a star rating system should be.

Our percentage based Star Rating function gives you 1,680% increase in accuracy — compared with the traditional 5 star system, it has 84 hotspots (84 pixels), instead of 5 hot spots (5 stars). Let’s do the math: (84/5)*100 = 1,680%… why restrict your users?

Download the .zip source code.

JAVASCRIPT

function $(v,o) { return((typeof(o)=='object'?o:document).getElementById(v)); } function $S(o) { return((typeof(o)=='object'?o:$(o)).style); } function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); } function abPos(o) { var o=(typeof(o)=='object'?o:$(o)), z={X:0,Y:0}; while(o!=null) { z.X+=o.offsetLeft; z.Y+=o.offsetTop; o=o.offsetParent; }; return(z); } function XY(e,v) { var o=agent('msie')?{'X':event.clientX+document.body.scrollLeft,'Y':event.clientY+document.body.scrollTop}:{'X':e.pageX,'Y':e.pageY}; return(v?o[v]:o); } star={}; star.mouse=function(e,o) { if(star.stop || isNaN(star.stop)) { star.stop=0; document.οnmοusemοve=function(e) { var n=star.num; var p=abPos($('star'+n)), x=XY(e), oX=x.X-p.X, oY=x.Y-p.Y; star.num=o.id.substr(4); if(oX<1 || oX>84 || oY<0 || oY>19) { star.stop=1; star.revert(); } else { $S('starCur'+n).width=oX+'px'; $S('starUser'+n).color='#111'; $('starUser'+n).innerHTML=Math.round(oX/84*100)+'%'; } }; } }; star.update=function(e,o) { var n=star.num, v=parseInt($('starUser'+n).innerHTML); n=o.id.substr(4); $('starCur'+n).title=v; req=new XMLHttpRequest(); req.open('GET','/AJAX_Star_Vote.php?vote='+(v/100),false); req.send(null); }; star.revert=function() { var n=star.num, v=parseInt($('starCur'+n).title); $S('starCur'+n).width=Math.round(v*84/100)+'px'; $('starUser'+n).innerHTML=(v>0?Math.round(v)+'%':''); $('starUser'+n).style.color='#888'; document.οnmοusemοve=''; }; star.num=0;   

CSS

#star ul.star { LIST-STYLE: none; MARGIN: 0; PADDING: 0; WIDTH: 85px; HEIGHT: 20px; LEFT: 10px; TOP: -5px; POSITION: relative; FLOAT: left; BACKGROUND: url('media/stars.gif') repeat-x; CURSOR: pointer; } #star li { PADDING: 0; MARGIN: 0; FLOAT: left; DISPLAY: block; WIDTH: 85px; HEIGHT: 20px; TEXT-DECORATION: none; text-indent: -9000px; Z-INDEX: 20; POSITION: absolute; PADDING: 0; } #star li.curr { BACKGROUND: url('media/stars.gif') left 25px; FONT-SIZE: 1px; } #star div.user { LEFT: 15px; POSITION: relative; FLOAT: left; FONT-SIZE: 13px; FONT-FAMILY: Arial; COLOR: #888; }

HTML

  <div id="star"> <ul id="star0" class="star" οnmοusedοwn="star.update(event,this)" οnmοusemοve="star.mouse(event,this)" title="Rate This!"> <li id="starCur0" class="curr" title="98" style="width: 82px;"></li> </ul> <div style="color: rgb(136, 136, 136);" mce_style="color: #888888;" id="starUser0" class="user">98%</div> <br style="clear: both;" mce_style="clear: both;"> <ul id="star1" class="star" οnmοusedοwn="star.update(event,this)" οnmοusemοve="star.mouse(event,this)" title="Rate This!"> <li id="starCur1" class="curr" title="50" style="width: 42px;"></li> </ul> <div style="color: rgb(136, 136, 136);" mce_style="color: #888888;" id="starUser1" class="user">50%</div> <br style="clear: both;" mce_style="clear: both;"> <ul id="star2" class="star" οnmοusedοwn="star.update(event,this)" οnmοusemοve="star.mouse(event,this)" title="Rate This!"> <li id="starCur2" class="curr" title="99" style="width: 83px;"></li> </ul> <div style="color: rgb(136, 136, 136);" mce_style="color: #888888;" id="starUser2" class="user">99%</div> <br style="clear: both;" mce_style="clear: both;"> <ul id="star3" class="star" οnmοusedοwn="star.update(event,this)" οnmοusemοve="star.mouse(event,this)" title="Rate This!"> <li id="starCur3" class="curr" title="70" style="width: 59px;"></li> </ul> <div style="color: rgb(136, 136, 136);" mce_style="color: #888888;" id="starUser3" class="user">70%</div> <br style="clear: both;" mce_style="clear: both;"> <ul id="star4" class="star" οnmοusedοwn="star.update(event,this)" οnmοusemοve="star.mouse(event,this)" title="Rate This!"> <li id="starCur4" class="curr" title="30" style="width: 25px;"></li> </ul> <div style="color: rgb(136, 136, 136);" mce_style="color: #888888;" id="starUser4" class="user">30%</div> </div>