两颗星星实现的星星点击评分效果实例页面

代码：

CSS代码：

/* 星星点灯照亮我的家门 */
.star_bg {
    width: 120px; height: 20px;
    background: url(star.png) repeat-x;
    position: relative;
    overflow: hidden;
}
.star {
    height: 100%; width: 24px;
    line-height: 6em;
    position: absolute;
    z-index: 3;
}
.star:hover {    
    background: url(star.png) repeat-x 0 -20px!important;
    left: 0; z-index: 2;
}
.star_1 { left: 0; }
.star_2 { left: 24px; }
.star_3 { left: 48px; }
.star_4 { left: 72px; }
.star_5 { left: 96px; }
.star_1:hover { width: 24px; }
.star_2:hover { width: 48px; }
.star_3:hover { width: 72px; }
.star_4:hover { width: 96px; }
.star_5:hover { width: 120px; }

label { 
    display: block; _display:inline;
    height: 100%; width: 100%;
    cursor: pointer;
}

/* 幕后的英雄，单选按钮 */
.score { position: absolute; clip: rect(0 0 0 0); }
.score:checked + .star {    
    background: url(star.png) repeat-x 0 -20px;
    left: 0; z-index: 1;
}
.score_1:checked ~ .star_1 { width: 24px; }
.score_2:checked ~ .star_2 { width: 48px; }
.score_3:checked ~ .star_3 { width: 72px; }
.score_4:checked ~ .star_4 { width: 96px; }
.score_5:checked ~ .star_5 { width: 120px; }

.star_bg:hover .star {  background-image: none; }

/* for IE6-IE8 JS 交互 */
.star_checked {    
    background: url(star.png) repeat-x 0 -20px;
    left: 0; z-index: 1;
}

HTML代码：

<div id="starBg" class="star_bg">                    	
    <input type="radio" id="starScore1" class="score score_1" value="1" name="score">
    <a href="#starScore1" class="star star_1" title="差"><label for="starScore1">差</label></a>
    <input type="radio" id="starScore2" class="score score_2" value="2" name="score">
    <a href="#starScore2" class="star star_2" title="较差"><label for="starScore2">较差</label></a>
    <input type="radio" id="starScore3" class="score score_3" value="3" name="score">
    <a href="#starScore3" class="star star_3" title="普通"><label for="starScore3">普通</label></a>
    <input type="radio" id="starScore4" class="score score_4" value="4" name="score">
    <a href="#starScore4" class="star star_4" title="较好"><label for="starScore4">较好</label></a>
    <input type="radio" id="starScore5" class="score score_5" value="5" name="score">
    <a href="#5" class="star star_5" title="好"><label for="starScore5">好</label></a>
</div>

效果：

差较差普通较好好

JS代码：

// IE6-IE8 不认识的干活
(function() {
    var eleStarBg = null,
        // 单选框以及长度
        eleRadios, lenRadios = 0,
        // 星星元素们
        eleStars,
        // 选中的星星元素
        eleStarChecked = null,
        // 改变IE6-8星星样式的类名
        clChecked = "star_checked";
        
    var funStarState = function(eleRadio) {
        if (eleRadio && eleRadio !== eleStarChecked) {
            var index = eleRadio.indexStore;
            if (eleStarChecked) {
                eleStarChecked.className = eleStarChecked.className.replace(" " + clChecked, "");
                eleStarChecked.style.width = '';
            }
            if (eleStars[index].className.indexOf(clChecked) == -1) {
                eleStars[index].className = eleStars[index].className + " " + clChecked;
                // 对应的宽度改变走起
                eleStars[index].style.width = (index + 1) * 24 + "px";
                eleStarChecked = eleStars[index];
            }
        }
    };
    
    if (typeof window.screenX == "undefined" && (eleStarBg = document.getElementById("starBg"))) {
        // 单选框们
        eleRadios = eleStarBg.getElementsByTagName("input");
        lenRadios = eleRadios.length;
        // a标签的星星元素们
        eleStars = eleStarBg.getElementsByTagName("a");
        for (var i=0; i<lenRadios; i+=1) {
            // 存储索引，方便找到对应的星星元素
            eleRadios[i].indexStore = i;
            // 单选选中后
            eleRadios[i].onclick = function() {                
                if (this.checked) {
                    funStarState(this);    
                }
            };
        }
        
        // 如果你还想兼容IE6浏览器
        if (!window.XMLHttpRequest) {
            for (var j=0; j<lenRadios; j+=1) {
                eleStars[j].indexStore = j;
                eleStars[j].onclick = function() {
                    var id = this.href.split("#")[1], eleRadio = document.getElementById(id);
                    if (eleRadio) {
                        eleRadio.checked = true;
                        funStarState(eleRadio);        
                    }
                    return false;
                };
            }
            // 鼠标经过
            eleStarBg.onmouseenter = function() {
                if (eleStarChecked) {
                    eleStarChecked.className = eleStarChecked.className.replace(" " + clChecked, "");
                    eleStarChecked.style.width = '';
                }
            };
            // 鼠标移出
            eleStarBg.onmouseleave = function() {
                if (eleStarChecked) {
                    eleStarChecked.className = eleStarChecked.className + " " + clChecked;
                    eleStarChecked.style.width = (eleStarChecked.indexStore + 1) * 24  + "px";
                }
            };
        }
    }	
})();