仿淘宝星级评分系统
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿淘宝星级评分系统</title>
<style type="text/css">
*{ margin:0; padding:0;}
ul{ list-style:none;}
body{ padding:20px;}
.star{ position:relative;}
.star ul,.star span{ float:left; padding:0 5px;}
.star ul li{ float:left; width:24px; height:19px; line-height:19px; background:url(img/star.png) no-repeat; text-indent:-9999px; cursor:pointer;}
.star p{ clear:both; position:absolute; top:21px; width:169px; height:57px; background:url(img/icon.gif) no-repeat; padding:5px 5px; display:none;}
.star p em{ display:block; color:#F90;}
.star p strong{ font-size:12px;}
.star ul li.on{ background:url(img/star.png) no-repeat 0 -29px;}
</style>
<script type="text/javascript">
window.onload = function(){
var oStar = document.getElementById('star');
var oUl = oStar.getElementsByTagName('ul')[0];
var oLi = oStar.getElementsByTagName('li');
var oP = oStar.getElementsByTagName('p')[0];
var oSpan = oStar.getElementsByTagName('span')[1];
var oScope = 0;
var notice = [
"很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
"不满意|部分有破损，与卖家描述的不符，不满意",
"一般|质量一般，没有卖家描述的那么好",
"满意|质量不错，与卖家描述的基本一致，还是挺满意的",
"非常满意|质量非常好，与卖家描述的完全一致，非常满意"
];
for(var i = 1; i <= oLi.length; i++){
oLi[i-1].index = i;
oLi[i-1].onmouseover = function(){
highColor(this.index);
oP.style.display = 'block';
oP.innerHTML = '<em>' + this.index + '分,' + notice[this.index-1].match(/(.*)\|/)[1] + '</em>' + '<strong>' + notice[this.index-1].match(/\|(.*)/)[1] + '</strong>';
oP.style.left = 63 + this.offsetWidth * (this.index-1) + 'px';
};
oLi[i-1].onmouseout = function(){
highColor();
oP.style.display = 'none';
};
oLi[i-1].onclick = function(){
oP.style.display = 'none';
highColor(this.index);
oSpan.innerHTML = notice[this.index-1].match(/\|(.*)/)[1];
}
}
//实现鼠标划进划出所在星星之前所有星星的状态
function highColor(flag){
flag = flag || oScop;
for(var i = 0; i < oLi.length; i++){
if(i < flag){
oLi[i].className = 'on';
}else{
oLi[i].className = '';
}
}
}
}
</script>
</head>
<body>
<div class="star" id="star">
<span>点击星星就能打分</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<span></span>
<p></p>
</div>
</body>
</html>
纯属个人代码学习收藏，不作解释。
