<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>评分</title>
<style type="text/css">
*{margin:0;padding:0px;}
ul,li{list-style-type: none;}
#content{width:405px;height: 81px;margin:10px auto;background: #584646;border:1px solid #C75A5A;padding: 10px;}
#content ul{width:405px;height: 81px;}
.active{background: url(bj_xing.png) no-repeat bottom left !important;}
#content ul li{width:81px;height:81px;float:left;background: url(bj_xing.png) no-repeat top left;}
#content ul:after{clear: both;}
p{width:150px;height:30px;margin:0 auto;text-align: center;line-height: 30px;border:1px solid #C75A5A;display: none;}
</style>
<script type="text/javascript">
var aDate=['很差','较差','一般','推荐','力荐'];
window.onload=function(){
var oDiv=document.getElementById('content');
var aLi=oDiv.getElementsByTagName('li');
var oP=document.getElementsByTagName('p')[0];
var i=0;
for(i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
oP.style.display='block';
oP.innerHTML=aDate[this.index];
for(i=0;i<=this.index;i++){
aLi[i].className='active';
}
}
aLi[i].onmouseout=function(){
oP.style.display='none';
for(i=0;i<aLi.length;i++){
aLi[i].className='';
}
}
aLi[i].onclick=function(){
alert('评分成功,'+(this.index+1)+'分');
}
}
}
</script>
</head>
<body>
<div id="content">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<p>一般</p>
</body>
</html>
查看范例
