我这个是在前一篇文章所介绍的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样式则没太多变化只是引用图片的路径做了适当修改,样式代码可见前一篇文章。
标签:function,功能,postfix,评分,offsetY,var,星级,document,event From: https://blog.51cto.com/u_2544485/7395608