1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 ul{ 8 width: 150px; 9 height: 30px; 10 } 11 li{ 12 list-style: none; 13 width: 27px; 14 height: 28px; 15 float: left; 16 background: url(images/star.gif); 17 } 18 </style> 19 <script type="text/javascript"> 20 window.onload=function () { 21 var lis= document.getElementsByTagName("li"); 22 for (var i = 0; i < lis.length; i++) { 23 lis[i].currentIndex=i; 24 lis[i].onmouseover = function (e) { 25 var event = e || window.event; 26 var li = event.target|| event.srcElement; 27 changeColor(li.currentIndex); 28 }; 29 } 30 function changeColor(index) { 31 for (var j = 0; j < lis.length; j++) { 32 lis[j].style.background = "url(images/star.gif)"; 33 } 34 for (var i = 0; i <= index; i++) { 35 lis[i].style.background = "url(images/star.gif) 0 -29px"; 36 } 37 } 38 } 39 </script> 40 </head> 41 <body> 42 <ul> 43 <li></li> 44 <li></li> 45 <li></li> 46 <li></li> 47 <li></li> 48 </ul> 49 50 </body> 51 </html>
