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>
