1 <!DOCTYPE html >
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <script type="text/javascript">
6 window.onload=function(){
7 var aUi=document.getElementById('zong');
8 var aLi=aUi.getElementsByTagName('li');
9 var aText=document.getElementById('text');
10 var i=0;
11 for(i=0;i<aLi.length;i++){
12 aLi[i].index=i;
13 //当鼠标移到星星上时
14 aLi[i].onmouseover=function(){
15 for(i=0;i<aLi.length;i++){
16 if(i<=this.index)
17 {
18 aLi[i].style.background="url(star.gif) no-repeat 0 -29px";
19 if(i<=1)
20 aText.innerHTML="不喜欢";
21 else if(i>=1&&i<=3)
22 aText.innerHTML="喜欢";
23 else if(i>=4)
24 aText.innerHTML="很喜欢";
25 }
26 else
27 {
28 aLi[i].style.background="url(star.gif) no-repeat 0 0";
29 }
30 }
31 };
32 //鼠标移出星星
33 aLi[i].onmouseout=function(){
34 for(i=0;i<aLi.length;i++)
35 {
36 aLi[i].style.background="url(star.gif) no-repeat 0 0";
37 aText.innerHTML="";
38 }
39
40 };
41 }
42 };
43 </script>
44 <style type="text/css">
45 *{margin:0;padding:0;}
46 #zong{width:135px;height:28px;margin:20px auto;}
47 #zong li{width:27px;float:left;height:28px;cursor:pointer;
48 background:url(star.gif) no-repeat 0 0;list-style: none;}
49 </style>
50 </head>
51 <body>
52 <ul id="zong">
53 <li></li>
54 <li></li>
55 <li></li>
56 <li></li>
57 <li></li>
58 <p id="text"></p>
59 </ul>
60 </body>
