基础 - 星星评分

结构

 

<div id="star">
    <div class="bottom">
        <span class="top"></span>
    </div>
</div>

样式

#star {
    width: 80px;
    padding: 5px;
    font-weight:bold;">#DBE1E7;
}
#star .bottom,
#star .top {
    width: 80px;
    height: 13px;
    background: #DBE1E7 url(http://mat1.gtimg.com/www/images/qq2012/temp/yunshi.png) no-repeat;
}
#star .bottom {
    position: relative;
    background-position: 0 0;
}
#star .top {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    background-position: 0 -27px;
}

　　

行为

    window.onload = function () {

        function  star(parentId,degree) {
            var oParentId = document.getElementById(parentId);
            var oTop = oParentId.getElementsByClassName("top")[0];
            oTop.style.width = degree%80+"px";
        }

        star("star",54);

    }