看到了很多的星级的例子，但是都只能选择整数。
就自己做了一个可以精确到百分比的例子。
思路：
1、 通过三个层来显示不同的星级图片样式。第一个层为默认显示图片，第二个层为选中形式，第三个层为事件控制层。
2、最上边的一个层，通过onmousemove事件来显示星级。
具体的看代码吧。没有做成类什么的。只是思路。
function stopBubble(e){
if(e && e.stopPropagation)
e.stopPropagation();
else
window.event.cancelBubble = true;
}
function getElementX(e){
return(e && e.layerX) || window.event.offsetX;
}
window.onload=function(){
window.test = document.getElementById("test");
var starb = document.getElementById("starbak");
starb.style.width="64px";
starb.style.height="32px";
var star = document.getElementById("star");
star.style.top = starb.style.top;
star.style.left = starb.style.top;
var staro = document.getElementById("starover");
staro.style.top = starb.style.top;
staro.style.left = starb.style.top;
staro.style.width = "64px";
staro.style.height="32px";
staro.onmousemove = function(e){
var x = getElementX(e);
//var sb = document.getElementById("starbak");
//sb.style.width = x + "px";
var sr = document.getElementById("star");
sr.style.width = x + "px";
window.test.innerHTML = x;
stopBubble(e);
}
staro.onclick = function(e)
{
alert(window.test.innerHTML);
}
}
</script>
</head>
<body>
fasdfasd</br>
<div id="test">
</div>
<div id="starcontrol">
<div id="starbak" style="position:absolute;background-image:url(award_star_silver_3.png);z-index:0"></div>
<div id="star" style="position:absolute;z-index:11;background-image:url(knewstuff.png);"></div>
<div id="starover" style="position:absolute;z-index:26;background-image:url(back.gif);CURSOR:hand;"></div>
</div>
<div id="starcontrol1">
<div id="startb1" style="background-image:url(award_star_silver_3.png);z-index:0"></div>
<div id="star11" style="position:relative;top:-22px;left:0px;background-image:url(knewstuff.png);z-index:0"></div>
</div>
</body>
</html>
下载：