CSS部分:
body,h3{margin:0; padding:0;}
#grade{width:500px; margin:100px auto;}
#grade span{float:left; color:#ff0808; margin-top:9px;}
#grade h3{float:left; height:22px; line-height:22px; font-size:16px; margin-top:9px;}
#stars{float:left;}
#stars a{float:left; width:22px; height:22px; background:url(star.png) 0 -22px; margin-top:9px;}
#notice{float:left; width:240px; padding-left:4px; color:#ef7300; font-size:14px; font-weight:bold; line-height:40px;}
#notice img{width:240px; height:40px; border:none; vertical-align:top;}
#notice span{display:none; margin-top:2px;color:#ef7300;}
HTML部分:
<div id="grade">
<span>*</span>
<h3>總體評價:</h3>
<div id="stars">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div id="notice">
<span></span>
<img src="notice.png" />
</div>
</div>
JS部分:
window.onload = function(){
var oDivStars = document.getElementById('stars');
var aA = oDivStars.getElementsByTagName('a');
var oDivNotice = document.getElementById('notice');
var oSpan = oDivNotice.getElementsByTagName('span')[0];
var oImg = oDivNotice.getElementsByTagName('img')[0];
var arrText = ['很差','較差','還行','推薦','力薦'];
var onOff = false;
var num = 0;
// 鼠標經過,顯示文字,同時隱藏圖片提示
oDivStars.onmouseover = function(){
if(!onOff){
oSpan.style.display = 'block';
oImg.style.display = 'none';
}
};
// 鼠標移開,隱藏文字,同時顯示圖片提示
oDivStars.onmouseout = function(){
if(!onOff){
oSpan.style.display = 'none';
oImg.style.display = 'block';
}
};
// 循環遍歷所有的a,執行相應事件
for (var i = 0; i < aA.length; i++) {
aA[i].index = i;
// 鼠標經過a
aA[i].onmouseover = function(){
grade(this.index, true);
};
// 鼠標移開a
aA[i].onmouseout = function(){
grade(num ,onOff);
};
// 鼠標點擊a
aA[i].onclick = function(){
onOff = true;
num = this.index;
grade(num,onOff);
};
}
// 評分函數
function grade(num , onOff){
for (var i = 0; i < aA.length; i++) {
aA[i].style.backgroundPosition = '0 -22px';
};
if(onOff){
for(var i = 0; i<= num; i++){
if(i<2){
aA[i].style.backgroundPosition = '0 -44px';
}else{
aA[i].style.backgroundPosition = '0 0';
}
}
}
oSpan.innerHTML = arrText[num];
}
};
預覽效果: