<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="zhaocom" content="http://www.zhaocom.xyz/" /> <title>评分星星</title> <style type="text/css"> *{ margin: 0; padding: 0; } #grade { width: 180px; height: 30px; } #grade ul{ list-style: none; } #grade ul li{ width: 27px; height: 28px; background: url(img/star.gif) no-repeat; float: left; } </style> <script> window.onload=function(){ var Ogae = document.getElementById(‘grade‘); var aLi = Ogae.getElementsByTagName(‘li‘); for(var i = 0;i<aLi.length;i++){ aLi[i].index=i; aLi[i].onmouseover=function(){ for(var i = 0;i<aLi.length;i++){ if(i<=this.index){ aLi[i].style.background="url(img/star.gif) no-repeat 0 -29px"; } else{ aLi[i].style.background="url(img/star.gif) no-repeat 0 0" } } } aLi[i].onmousedown=function(){ alert("提交完成："+(this.index+1)+"星") } } } </script> </head> <body> <div id="grade"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
原文：http://www.cnblogs.com/zhaocom/p/7865308.html