星级评分功能实现

       我这个是在前一篇文章所介绍的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)

80/84*100)=67

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