星级评分功能实现

       我这个是在前一篇文章所介绍的js脚本基础上做的修改。（请先看前面一篇《星级评分效果 -js实现 》）

       由于把前面的脚本引入项目里，发现当鼠标移到星星图片上获取到的OY值并不在1到19之间，所以导致该功能不起作用。后来通过调试测试发现在IE中当鼠标移动到星星图片上通过event获取到的offsetY的值无论页面向上向下滑动多少其值永远在1到19之间。

所以修改了程序脚本，原来OY修改为event.offsetY,，有人会问了在firefox中没有offsetY这个属性，其实在firefox中的layerY与IE中的offsetY获取到的值是一样的。

      还有一点发现通过传过去的e在IE中运行并不存在，所以添加了一个判断若e不存在则获取window.event。

      主要代码如下：

      JS代码：

       var starStop='undefined'; 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}; var o; if(!e) e = window.event; if(e.pageX){ o={'X':e.pageX,'Y':e.pageY}; }else if(e.clientX){ o={'X':e.clientX + document.body.scrollLeft,'Y':e.clientY + document.body.scrollTop}; } return(v?o[v]:o); } function starMouse(postfix,e,o) { if(starStop || isNaN(starStop)) { starStop=0; document.οnmοusemοve=function(e) { //debugger; var n=postfix; var p=abPos($('star'+n)), x=XY(e), oX=x.X-p.X, oY=x.Y-p.Y; staNum=o.id.substr(4); var mouseY ; //获取鼠标所在位置确定鼠标移到了星星图像上 if(!e){ e = window.event; } if(e.offsetY){ mouseY = e.offsetY; }else if(e.layerY){ mouseY = e.layerY; }else{ mouseY = oY; } if(oX<1 || oX>84 || mouseY<0 || mouseY>19) { starStop=1; starRevert(postfix); }else { $S('starCur'+n).width=oX+'px'; $S('starUser'+n).color='#111'; $('starUser'+n).innerHTML=Math.round(oX/84*100)+'分'; } }; } }; function starUpdate(postfix,e,o) { var n=postfix, v=parseInt($('starUser'+n).innerHTML); n=o.id.substr(4); $('starCur'+n).title=v; //更新评分隐藏域值 if($('memo')){ $('memo').value=v; } }; function starRevert(postfix) { var n=postfix, 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=''; };

     HEML代码：

      <div id="star"><div class="label">星级:</div><ul id="starRating" class="star" οnmοusedοwn="starUpdate(/'Rating/',event,this)" οnmοusemοve="starMouse(/'Rating/',event,this)" > <li id="starCurRating" class="curr" title="80" style="width: 67px;"></li> </ul> <div style="color: rgb(136, 136, 136);" mce_style="color: #888888;" id="starUserRating" class="user">80分</div></div>

     默认值设定为80分，其主要通过<li>中背景图片的宽度来达到所展示出来的星级评分效果。

     公式为：Math.round(分数/84*100)

     如：Math.round(80/84*100)=67

     Css样式则没太多变化只是引用图片的路径做了适当修改，样式代码可见前一篇文章。