星级评分/半颗星

效果如下：

半颗星实现思路：用两个span标签，分左右排列，左边hover半星，右边hover全星

HTML代码：

<div class="task_grade">
            <span style="float:left;">请打分：</span>
                  <ul>
                     <li><span class="spanl"></span><span class="spanr"></span></li>
                     <li><span class="spanl"></span><span class="spanr"></span></li>
                     <li><span class="spanl"></span><span class="spanr"></span></li>
                     <li><span class="spanl"></span><span class="spanr"></span></li>
                     <li><span class="spanl"></span><span class="spanr"></span></li>
                   </ul>
             <span style="float:left;padding-left:50px;">分数：<span class="grade_number">0分</span></span>
 </div>

css：

        .task_grade ul{
            list-style: none; 
            margin: 0px;
            padding: 0px;
            width: auto;
        }

        .task_grade li {
            width: 16px;
            height: 16px;
            float: left;
            margin: 0px 2px;
            z-index: 100;
        }
         .task_grade li .spanl {
                display:block;
                width: 8px;
                height: 16px;
                float: left;
                background: url('images/星.png') no-repeat;
            }

            .task_grade li .spanr {
                display: block;
                width: 16px;
                height: 16px;
                background: url('images/星.png') no-repeat;
            }

js：

        var str = $(".task_grade li span");
        var i = 0;
        for (i = 0; i < str.length; i++) {
            str[i].index = i;
            str[i].onmouseover = function () {
                for (i = 0; i < str.length+1; i++) {
                    if (i <= this.index) {
                        str[i].style.background = "url('images/星 (2).png') no-repeat";
                        $('.task_grade .grade_number').text(this.index + 1 + "分");
                    } 
                    else {
                        str[i].style.background = "url('images/星.png') no-repeat";
                    }
                }
            }
        }