http://www.radioactivethinking.com/rateit/example/example.htm 之前用过的一个插件

好奇你这个功能上线没0.0

其实这种打分有一种技术难度最低的方案:你不是已经取得了分数么，一般有一般就是，不同分数调用不同素材

其实那个全透明的应该作为背景，然后那个满分星星的可以根据评分的高低适当的遮挡一部分来达到效果

准备睡觉了，简单的写了下，基于jquery，注释也没怎么写，应该能看懂。

重新看了下需求，好像有点不一样，原理是一样的。

HTML部分

css部分

#startBox {
                width: 94px;
                height: 16px;
                background: url(img/bg.png);
                position: relative;
            }
            img {
                position: absolute;
                top: 0;
                left: 0;
            }
            p {
                width: 9.4px;
                height: 100%;
                float: left;
                z-index: 2;
                background: url(img/hover.png);
            }
            .startb {
                background-position: 101px;
            }
            .starta,
            .startb {
                opacity: 0;
            }
            .starta.show,
            .startb.show {
                opacity: 1;
            }

JS部分

var clickState = false;//是否点击了星星
            var oStrat = $("#startBox>p");
            oStrat.hover(function() {
                var startIndex = $(this).index();
                if (startIndex == 0) {
                    $(this).eq(startIndex).addClass("show");
                    if($(this).next().hasClass("show")){
                        $(this).next().removeClass("show");
                    }
                } else {
                    var prevState = $(this).prev().hasClass("show");
                    var nextState = $(this).next().hasClass("show");
                    console.log(prevState);
                    if (prevState&&nextState) {
                        $(this).next().removeClass("show");
                    }
                    else if(prevState){
                        $(this).addClass("show");
                    }
                }
            });
            oStrat.click(function(){
                clickState=true;
            });
            
            $("#startBox").mouseleave(function(){
                if(clickState){
                    clickState=false;
                }
                else{
                    oStrat.removeClass("show");
                }
            });

只是做展示的话可以简单一点,利用background-repeat来做可以想要多少个星星展示都可以（又不是七龙珠= =）：

html

css

    .box{
        width:100px;height:30px;
        background-image:url(./star_grey.png);
    }
    .star{
       width:0px;height:100%;
       background-image:url(./star_yellow.png);
    }

然后接下来需要做的就是根据分数来改变star的宽度就好；

注：徒手代码，未测试，只是展示个思路。

css

.stars{display: inline-block;height: 1.15rem;width:7.6rem;margin-right:.4rem;background: url(../images/stars_nor.png) no-repeat top left / auto 100%;vertical-align:baseline;}
.stars > span {display:block;height: 1.15rem;background: url(../images/stars_cur.png) no-repeat top left / auto 100%;vertical-align: top;}

html

高度自己修改下就行了

你先定义好class，使用js根据数值来设置你要的class就好了

判断根据分数的不同显示星星的图片长度不同应该是可行的吧？ 但是如果需要手动评分的话就去看看楼上的回答吧

把你的透明素材反过来，星星是透明的，边上是不透明的，然后后面放一个橙色的p，宽度为score/10*100%,再后面放一个灰色的p，宽度100%，这样可以实现连续的星星分数，比如7.3。