<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> *{margin:0;padding:0;list-style:none;} ul{width:300px;margin:0 auto;} li{background:url(img/star.gif) 0 0 no-repeat;width:14px;height:24px;float:left;} .li_bg{background-position:-14px 0px;} .li_two{background-position:0px -29px;width:14px;} .li_two_bg{background-position:-14px -29px;} </style> <script type="text/javascript"> window.onload=function() { var oUl=document.getElementById('ul1'); var oLi=oUl.getElementsByTagName('li');//取得所有li //当鼠标移开父级的时候，li还原默认状态 oUl.onmouseout=function() { for(var i=0;i<oLi.length;i++) { if(i%2==0) { oLi[i].className=""; } else { oLi[i].className="li_bg"; } } }; //循环所有li,并添加移上和点击事件 for(var i=0;i<oLi.length;i++) { (function(index) { //当鼠标移上去的时候 oLi[i].onmouseover=function() { for(var i=0;i<oLi.length;i++) { if(index>=i)//当移上去的下标大于前面的li length的时候 { if(i%2==0)//判断样式加给哪个li { oLi[i].className="li_two"; } else { oLi[i].className="li_two_bg"; } } else//当下标小于后面的li { if(i%2==0)//判断给哪个li样式 { oLi[i].className=""; } else { oLi[i].className="li_bg"; } } } }; //鼠标点击后的事件 oLi[i].onclick=function() { //鼠标点击过后，把输欧事件都清空 for(var i=0;i<oLi.length;i++) { oLi[i].onmouseover=null; oLi[i].onclick=null; } oUl.onmouseout=null;
alert('提交成功:'+(index+1)+'分') }; })(i); } }; </script> </head> <body> <ul id="ul1"> <li class=""></li> <li class="li_bg"></li> <li></li> <li class="li_bg"></li> <li></li> <li class="li_bg"></li> <li></li> <li class="li_bg"></li> <li></li> <li class="li_bg"></li> </ul> </body> </html>
星星图片，有需要的下载;下载方式，直接右击鼠标另存为(*^__^*) 嘻嘻……