半颗星星评分 

<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>

星星图片，有需要的下载;下载方式，直接右击鼠标另存为(*^__^*) 嘻嘻……

posted @ 2013-05-06 13:40  小子不帅  阅读(218)  评论(1)  编辑  收藏  举报