星星评分与显现

<!-- 评分DOM -->
<span id="box" class="score-box"><b></b><b></b><b></b><b></b><b></b></span>
<span id="score" class="score">0</span>分

<!--  展现DOM，注意，这里允许4.3分，这样带小数的效果。-->
<span class="level"><b></b><b></b><b></b><b></b><b></b><span class="view" style="width:86%;"></span></span>
<span class="avg">4.3</span>

.score-box{position:relative;}
.score-box b{width:16px; height:16px;margin:0 2px;  display:inline-block; background:url(../images/score.gif) 0 0 repeat-x; position:relative;z-index:2;overflow:hidden;cursor:pointer;_zoom:1;}
.score{color:#f56600;margin-right:2px;}

.level{position:relative;width:80px;overflow:hidden;display:inline-block;}
.level b{display:inline-block;width:16px;height:16px;background:url(../images/score.gif) 0 0;overflow:hidden;}
.view{display:block;position:absolute;top:0;left:0;width:0;height:16px;overflow:hidden;background:url(../images/score.gif) 0 -18px repeat-x;}

var box = document.getElementById('box');

box.onmouseover = function(e){
            var e = e || window.event;
            var target = e.srcElement || e.target;
            var tagName = target.tagName.toUpperCase();
            if(tagName == 'B'){
                var j = 1;
                target.style.backgroundPosition = '0 -18px';
                var nd = target.previousSibling;
                while(nd && nd.tagName == target.tagName){
                    nd.style.backgroundPosition = '0 -18px';
                    nd = nd.previousSibling;
                    j++;
                }
                nd = target.nextSibling;
                while(nd && nd.tagName == target.tagName){
                    nd.style.backgroundPosition = '0 0';
                    nd = nd.nextSibling;
                }
                document.getElementById('score').innerHTML = j;
            }
        }