五角星评分，利用背景图片，雪碧图来写的

http://blog.csdn.net/qq_33769914/article/details/52526924这个是用mui写的，星星的图片是利用字体图标加进去的，可以改变他的大小和颜色。

但是如果我们希望使用自己设计的星星呢？样式是这样的，点击时是下面的样式。

我们利用background-position：x,y; 定位显示是否选中状态

以及background-repeat:repeat-x;  重复，选中了几个，就重复的宽度width是多少。五角星大小是24px ，所以你repeat-x后设置width:48px.就是显示两个五角星啦

html内容：

        <div id="xzw_starSys">
                    <ul class="star" id="star0" style="display: block;float: left;">
                        <li><a href="#" title="1" class="one-star">1</a></li>
                        <li><a href="#" title="2" class="two-stars ">2</a></li>
                        <li><a href="#" title="3" class="three-stars ">3</a></li>
                        <li><a href="#" title="4" class="four-stars">4</a></li>
                        <li><a href="#" title="5" class="five-stars">5</a></li>
                    </ul>                    
                <span class="des">&nbsp;&nbsp;&nbsp;</span>         
        </div>

css。是重点！！！

ul{list-style:none;}

#xzw_starSys  .star{background:url('images/star.png') repeat-x;width:120px;height:20px;}   //一个宽度是24px,5个就是24*5=120px

#xzw_starSys .star li{float:left;padding:0px;margin:0px}

#xzw_starSys { position: relative;}

#xzw_starSys .star li  a{position:absolute;width:24px;height:20px; }

#xzw_starSys .star li a.on{background:url('images/star.png')0px -25px repeat-x;z-index:3;left:0} //left:0是让他一直从左边开始

/*给他们定位使得五个星星和五个li a是位置重合的,这样才能知道点击了第几个a*/        像这样，
#xzw_starSys .star a.one-star{left:0}
#xzw_starSys .star a.two-stars{left:24px}
#xzw_starSys .star a.three-stars{left:48px}
#xzw_starSys .star a.four-stars{left:72px}
#xzw_starSys .star a.five-stars{left:96px}

/*设置显示的宽度*/
#xzw_starSys .star a.one-star.on{width:24px}
#xzw_starSys .star a.two-stars.on{width:48px}
#xzw_starSys .star a.three-stars.on{width:72px}
#xzw_starSys .star a.four-stars.on{width:96px}
#xzw_starSys .star a.five-stars.on{width:120px}
  

js内容。点击哪个就让那个a加上on这个class。

 $("#xzw_starSys").on("click",".star a",function(e){
                $(this).addClass("on").parent("li").siblings().find("a").removeClass("on"); 

                console.log($(this).attr("title"))
            });