功能特点: 1.同一页面可以使用多个评星,相互不干扰 2.星星数量可自定义 3.可设置默认的星级 4.在选择星级之后,仍有悬停效果 rating.js function rating(){ var path;//星星图片的文件夹 var starPath0;//空星星的图片名称,必须是gif var starPath1;//实星星的图片名称 var divStarContainer;//加载星星的容器div,可以不是div var txtStarNum;//显示评级数的文本框 var starCount;//星星数 this.init=function(){ path=this.path; starPath0=this.path0; starPath1=this.path1;//设置图片路径 divStarContainer=this.divName; txtStarNum=this.txt; starCount=this.starCount; var div=document.getElementById(this.divName); div.οnmοuseοut=function(){undoStar(this)} div.setAttribute("curStar",this.curStar); //alert(divStarContainer); addStar(); undoStar(div); } //向层中添加星星 function addStar(){ var div=document.getElementById(divStarContainer); for(var i=0;i<starCount;i++){ var img=document.createElement("img"); img.src=path+starPath0; img.id=divStarContainer+"_star"+i; img.name=i+1; img.style.cursor="pointer"; img.οnmοuseοver= function(){changeStar(this.name)} img.οnclick= function(){selectStar(this.name)} div.appendChild(img); } } //改变星星,鼠标在上面移动的时候触发 function changeStar(num){ for(var i=0;i<starCount;i++){ var img = document.getElementById(divStarContainer+"_star"+i); if(i<num){ img.src=img.src.replace(//w*/.gif$/, starPath1); }else{ img.src=img.src.replace(//w*/.gif$/, starPath0); } } var txt=document.getElementById(txtStarNum); if(txt!=null){txt.value=num;} } //还原星星,鼠标离开容器的时候触发 function undoStar(div){ var num =div.getAttribute("curStar"); for(var i=0;i<starCount;i++){ var img = document.getElementById(divStarContainer+"_star"+i); if(i<num){ img.src=img.src.replace(//w*/.gif$/, starPath1); }else{ img.src=img.src.replace(//w*/.gif$/, starPath0); } } var txt=document.getElementById(txtStarNum); if(txt!=null){txt.value=num;} } //选择星星,鼠标点击的时候触发 function selectStar(num){ var div=document.getElementById(divStarContainer); div.setAttribute("curStar",num) } } 页面: <label id="lblStar1"></label><input type="text" id="txt" /> <mce:script type="text/javascript"><!-- var m=new rating(); m.path="/images/"; m.path0="nst.gif"; m.path1="sth.gif"; m.divName="lblStar1"; m.starCount=5; m.txt="txt"; m.curStar=3; m.init(); // --></mce:script>