<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
var oUl = document.getElementById("list");
var aLi = oUl.getElementsByTagName("li");
var half = 2;
var off = 1;
for(var i = 0; i < aLi.length; i++)
{
aLi[i].index = i;
aLi[i].onmouseover = function (){
if(off)
{
fillstar(this.index,half);
}
}
aLi[i].onmouseout = function (){
if(off)
{
for(var i = 0; i < aLi.length; i++ )
{
aLi[i].style.background = "url(http://img.alicdn.com/tps/i1/T1r.UsXf4dXXcC1lsa-204-400.png) no-repeat";
}
}
}
aLi[i].onclick = function (){
if(off)
{
fillstar(this.index,half);
off = !off;
}
}
function fillstar(num,half){
if( num < half )
{
for(var i = 0; i <= num; i++)
{
aLi[i].style.background = "url(http://img.alicdn.com/tps/i1/T1r.UsXf4dXXcC1lsa-204-400.png) no-repeat 0px -116px";
}
}else if ( num >= half && num < aLi.length - 1 ){
for(var i = 0; i <= num; i++)
{
aLi[i].style.background = "url(http://img.alicdn.com/tps/i1/T1r.UsXf4dXXcC1lsa-204-400.png) no-repeat 0px -57px";
}
}else {
for(var i = 0; i <= num; i++)
{
aLi[i].style.background = "url(http://img.alicdn.com/tps/i1/T1r.UsXf4dXXcC1lsa-204-400.png) no-repeat 0px -87px";
}
}
}
}
}
</script>
<style>
#list{list-style: none;}
#list li{
height: 23px;
width: 24px;
background: url(http://img.alicdn.com/tps/i1/T1r.UsXf4dXXcC1lsa-204-400.png) no-repeat;
display: block;
float: left;
cursor: pointer;
}
</style>
</head>
<body>
<ul id = "list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</head>