<script>
var aA = $("a");
var timer;
var iStar = -1;
var unitil = [{
score: "1分",
impress: "很不满意",
notice: "差得太离谱,与卖家描述的严重不符,非常不满"
},
{
score: "2分",
impress: "不满意",
notice: "部分有破损,与卖家描述的不符,不满意"
},
{
score: "3分",
impress: "一般",
notice: "质量一般,没有卖家描述的那么好"
},
{
score: "4分",
impress: "满意",
notice: "质量不错,与卖家描述的基本一致,还是挺满意的"
},
{
score: "5分",
impress: "非常满意",
notice: "质量非常好,与卖家描述的完全一致,非常满意"
}
];
aA.each(function (i) {
$(this).mouseover(function () {
clearTimeout(timer);
point(i);
$("#box").show();
$("#box").css("left",87+26*i);
$("#box span").eq(0).html(unitil[i].score);
$("#box span").eq(1).html(unitil[i].impress);
$("#box h2").html(unitil[i].notice);
});
$(this).click(function () {
point(i);
iStar = i;
$("#box").hide();
$("#appraise").show();
$("#appraise b").html(unitil[i].score);
$("#appraise span").html("("+unitil[i].notice+")");
});
});
aA.mouseout(function () {
timer = setTimeout(function () {
point(iStar);
$("#box").hide();
}, 200);
});
function point(num) {
aA.css("background-position", "");
for (var j = 0; j <= num; j++) {
$(aA[j]).css("background-position", "0");
};
};
});
</script>
<body>
<div id="warp">
<p>点击星星就能打分</p>
<p>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</p>
<div id="box">
<em></em>
<span>1分</span><span>很不满意</span>
<h2>差得太离谱,与卖家描述的严重不符,非常不满</h2>
</div>
<p id="appraise"><b>3分</b><span>(质量一般,没有卖家描述的那么好)</span></p>
</div>
</body>