1.引入插件
記得先引入jquery，在引入starScore.js.這個插件不需要引入css文件，直接寫在html中，修改樣式直接修改就OK。

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="js/starScore.js"></script>

2.css

<style>
        body,li,p,ul {
    margin: 0;
    padding: 0;
    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
}
ul, li, ol { list-style: none; }

/* 重置文本格式元素 */
a {
    text-decoration: none;
    cursor: pointer;
    color:#333333;
    font-size:14px;
}
a:hover {
    text-decoration: none;
}
.clearfix::after{
    display:block;
    content:'';
    height:0;
    overflow:hidden;
    clear:both;
}

/*星星樣式*/
.content{
    width:600px;
    margin:0 auto;
    padding-top:20px;
}
.title{
    font-size:14px;
    background:#dfdfdf;
    padding:10px;
    margin-bottom:10px;
}
.block{
    display: inline-block;
    width:160px;
    margin:10px 0;

    line-height:21px;
}
.block .star_score{
    float:left;
}
.star_list{
    height:21px;
    margin:50px;
    line-height:21px;
}
.block p,.block .attitude{
    padding-left:20px;
    line-height:21px;
    display:inline-block;
}
.block p span{
    color:#C00;
    font-size:16px;
    font-family:Georgia, "Times New Roman", Times, serif;
}

.star_score {
    background:url(../img/star_link.png);
    width:160px;
    height:21px;
    position:relative;
}

.star_score a{
    height:21px;
    display:block;
    text-indent:-999em;
    position:absolute;
    left:0;
}

.star_score a:hover{
    background:url(../img/star_hover.png);
    left:0;
}

.star_score a.clibg{
    background:url(../img/star_hover.png);
    left:0;
}

#starttwo .star_score {
    background:url(../img/star_link.png);
}

#starttwo .star_score a:hover{
    background:url(../img/star_hover.png);
    left:0;
}

#starttwo .star_score a.clibg{
    background:url(../img/star_hover.png);
    left:0;
}

/*星星樣式*/

.show_number{
    float: left;
    margin-top: 17px;
}

.show_number li{
    width:60px;
    border:0;
}

.atar_Show{
    background:url(../img/star_link.png);
    background-size: 12px 12px;
    width:60px;
    height:12px;
    position:relative;
    /*top: 16px;*/
    float:left;
}

.atar_Show p{
    background:url(../img/star_hover.png);
    background-size: 12px 12px;
    left:0;
    height:12px;
    width:60px;
}

.show_number li span{
    display:inline-block;
    line-height:21px;
}

</style>

3.html

<div class="content">
    <p class="title">半顆星評分</p>
    <div id="startone" class="block clearfix">
        <div class="star_score"></div>
        <p style="float:left;">您的評分：<span class="fenshu"></span> 分</p>
        <div class="attitude"></div>
    </div>
    <p class="title">1顆星評分</p>
    <div id="starttwo" class="block clearfix">
        <div class="star_score"></div>
        <p style="float:left;">您的評分：<span class="fenshu"></span> 分</p>
        <div class="attitude"></div>
    </div>
    <p class="title">分數(shù)展示</p>
    <ul class="show_number clearfix">
        <li>
            <div class="atar_Show">
                <p tip="2.5"></p>
            </div>
        </li>
    </ul>
    <ul class="show_number clearfix">
        <li>
            <div class="atar_Show">
                <p tip="4.5"></p>
            </div>
        </li>

    </ul>
    <ul class="show_number clearfix">
        <li>
            <div class="atar_Show">
                <p tip="5"></p>
            </div>
        </li>
    </ul>
</div>

4.js

<script>
    //星星展示分數(shù)
    $(".show_number li p").each(function(index, element) {
        var num=$(this).attr("tip");
        var www=num*12;//
        $(this).css("width",www);
        $(this).parent(".atar_Show").siblings("span").text(num+"分");
    });
    //星星 ---  評論星星，可點擊評論
    scoreFun($("#starttwo"),{
        fen_d:22,//每一個a的寬度
        ScoreGrade:5//a的個數(shù) 10或者
    });
</script>

如果出現(xiàn)重影的情況，請把星星的寬度改一下，星星的父元素寫成5顆星星加起來的寬度，