<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<title>js网页特效漂亮的星级评价效果</title>
<style type="text/css">
body{
margin:0;padding:0 10px;color:#333;text-align:center;font:12px Arial,Helvetica,sans-serif;
}
h1,h2,h3,h4,h5,h6,form,ul,img{
margin:0;padding:0;border:0;
}
li{
list-style:none;
}
div#AddDP{
text-align:left;margin-top:20px;border:1px solid #ffdfb6;background:#fffbf5;
}
div#AddDP h5{
margin:0;padding:5px;background:#fff3dd;font-size:14px;
}
div#AddDP ul.Star{
margin-top:8px;margin-left:6em;
}
div#AddDP ul.Star li{
float:left;margin-right:8px;margin-bottom:5px;margin-bottom:0;list-style:none;
}
div#AddDP ul.Star li span.Select{
float:left;padding:5px;border:1px solid #ffcc00;display:block;
}
div#AddDP ul.Star li span.Select img{
vertical-align:middle;
}
</style>
<script language="javascript">
var sArray = new Object;
sArray[0] = new Image;
sArray[0].src = "http://www.5xsj.net/img/201201/icon_star_1.gif";
for (var i=1; i<6; i++) {
sArray[i] = new Image();
sArray[i].src = "http://www.5xsj.net/img/201201/icon_star_2.gif";
}
var starTimer;
var pro ;
var rate ;
function initStar() {
try {
setProfix("star_");
setStars(document.getElementById("rating").value,'rating');
setProfix("taste_");
setStars(document.getElementById("taste").value,'taste');
setProfix("price_");
setStars(document.getElementById("price").value,'price');
setProfix("environment_");
setStars(document.getElementById("environment").value,'environment');
} catch(e){
}
}
function showStars(starNum,rate) {
try {
clearStarTimer();
greyStars();
colorStars(starNum);
} catch(e){}
//setStars(starNum,rate);
}
function setProfix(profix) {
pro = profix ;
}
function colorStars(starNum) {
try {
for (var i=1; i <= starNum; i++) {
var tmpStar = document.getElementById(pro + i);
tmpStar.src = sArray[starNum].src;
}
} catch(e){}
}
function greyStars() {
try {
for (var i=1; i<6; i++) {
var tmpStar = document.getElementById(pro + i);
tmpStar.src = sArray[0].src;
}
} catch(e){}
}
function greyAll(curpro,currate) {
try {
document.getElementById(currate).value ="";
for (var i=1; i<6; i++) {
var tmpStar = document.getElementById(curpro + i);
tmpStar.src = sArray[0].src;
}
} catch(e){}
}
function setStars(starNum,rate) {
rate = rate ;
try {
clearStarTimer();
var rating = document.getElementById(rate);
rating.value = starNum;
showStars(starNum);
} catch(e){}
}
function clearStars(currate) {
rate = currate ;
try {
var rating = document.getElementById(rate);
if (rating.value != '') {
setStars(rating.value,rate);
} else {
greyStars();
}
} catch(e){}
}
function resetStars() {
try {
clearStarTimer();
var rating = document.getElementById(rate);
if (rating.value != '') {
setStars(rating.value,rate);
} else {
greyStars();
}
} catch(e){}
}
function clearStarTimer() {
if (starTimer) {
clearTimeout(starTimer);
starTimer = null;
}
}
</script>
</head>
<body>
<div id="AddDP">
<h5>添加点评</h5>
<form name="formappraisement" action="" method="post">
<input name="appraisementflag" id="appraisementflag" value="0" type="hidden">
<input id="appraisementcity" name="appraisementcity" value="168" type="hidden">
<input id="appraisementstoreid" name="appraisementstoreid" value="26135eea" type="hidden">
<input id="rating" name="serving" value="" type="hidden">
<input id="taste" name="taste" value="1" type="hidden">
<input id="price" name="price" value="5" type="hidden">
<input id="environment" name="environment" value="2" type="hidden">
<div>
<ul class="Star">
<li><span class="number">*</span>服务<span class="Select"> <a onmouseover="javascript:setProfix('star_');showStars(1,'rating');" onmouseout="javascript:setProfix('star_');clearStars('rating');" href="javascript:setProfix('star_');setStars(1,'rating');"><img id="star_1" title="差(1)" src="http://www.5xsj.net/img/201201/icon_star_1.gif"></a><a onmouseover="javascript:setProfix('star_');showStars(2,'rating');" onmouseout="javascript:setProfix('star_');clearStars('rating');" href="javascript:setProfix('star_');setStars(2,'rating');"><img id="star_2" title="一般(2)" src="http://www.5xsj.net/img/201201/icon_star_1.gif"></a><a onmouseover="javascript:setProfix('star_');showStars(3,'rating');" onmouseout="javascript:setProfix('star_');clearStars('rating');" href="javascript:setProfix('star_');setStars(3,'rating');"><img id="star_3" title="好(3)" src="http://www.5xsj.net/img/201201/icon_star_1.gif"></a><a onmouseover="javascript:setProfix('star_');showStars(4,'rating');" onmouseout="javascript:setProfix('star_');clearStars('rating');" href="javascript:setProfix('star_');setStars(4,'rating');"><img id="star_4" title="很好(4)" src="http://www.5xsj.net/img/201201/icon_star_1.gif"></a><a onmouseover="javascript:setProfix('star_');showStars(5,'rating');" onmouseout="javascript:setProfix('star_');clearStars('rating');" href="javascript:setProfix('star_');setStars(5,'rating');"><img id="star_5" title="非常好(5)" src="http://www.5xsj.net/img/201201/icon_star_1.gif"></a> </span></li>
<li><span class="number">*</span>口味<span class="Select"> <a onmouseover="javascript:setProfix('taste_');showStars(1,'taste');" onmouseout="javascript:setProfix('taste_');clearStars('taste');" href="javascript:setProfix('taste_');setStars(1,'taste');"><img id="taste_1" title="差(1)" src="http://www.5xsj.net/img/201201/icon_star_2.gif"></a><a onmouseover="javascript:setProfix('taste_');showStars(2,'taste');" onmouseout="javascript:setProfix('taste_');clearStars('taste');" href="javascript:setProfix('taste_');setStars(2,'taste');"><img id="taste_2" title="一般(2)" src="http://www.5xsj.net/img/201201/icon_star_1.gif"></a><a onmouseover="javascript:setProfix('taste_');showStars(3,'taste');" onmouseout="javascript:setProfix('taste_');clearStars('taste');" href="javascript:setProfix('taste_');setStars(3,'taste');"><img id="taste_3" title="好(3)" src="http://www.5xsj.net/img/201201/icon_star_1.gif"></a><a onmouseover="javascript:setProfix('taste_');showStars(4,'taste');" onmouseout="javascript:setProfix('taste_');clearStars('taste');" href="javascript:setProfix('taste_');setStars(4,'taste');"><img id="taste_4" title="很好(4)" src="http://www.5xsj.net/img/201201/icon_star_1.gif"></a><a onmouseover="javascript:setProfix('taste_');showStars(5,'taste');" onmouseout="javascript:setProfix('taste_');clearStars('taste');" href="javascript:setProfix('taste_');setStars(5,'taste');"><img id="taste_5" title="非常好(5)" src="http://www.5xsj.net/img/201201/icon_star_1.gif"></a> </span></li>
<li><span class="number">*</span>环境<span class="Select"> <a onmouseover="javascript:setProfix('environment_');showStars(1,'environment');" onmouseout="javascript:setProfix('environment_');clearStars('environment');" href="javascript:setProfix('environment_');setStars(1,'environment');"><img id="environment_1" title="差(1)" src="http://www.5xsj.net/img/201201/icon_star_2.gif"></a><a onmouseover="javascript:setProfix('environment_');showStars(2,'environment');" onmouseout="javascript:setProfix('environment_');clearStars('environment');" href="javascript:setProfix('environment_');setStars(2,'environment');"><img id="environment_2" title="一般(2)" src="http://www.5xsj.net/img/201201/icon_star_2.gif"></a><a onmouseover="javascript:setProfix('environment_');showStars(3,'environment');" onmouseout="javascript:setProfix('environment_');clearStars('environment');" href="javascript:setProfix('environment_');setStars(3,'environment');"><img id="environment_3" title="好(3)" src="http://www.5xsj.net/img/201201/icon_star_1.gif"></a><a onmouseover="javascript:setProfix('environment_');showStars(4,'environment');" onmouseout="javascript:setProfix('environment_');clearStars('environment');" href="javascript:setProfix('environment_');setStars(4,'environment');"><img id="environment_4" title="很好(4)" src="http://www.5xsj.net/img/201201/icon_star_1.gif"></a><a onmouseover="javascript:setProfix('environment_');showStars(5,'environment');" onmouseout="javascript:setProfix('environment_');clearStars('environment');" href="javascript:setProfix('environment_');setStars(5,'environment');"><img id="environment_5" title="非常好(5)" src="http://www.5xsj.net/img/201201/icon_star_1.gif"></a> </span></li>
<li><span class="number">*</span>性价比<span class="Select"> <a onmouseover="javascript:setProfix('price_');showStars(1,'price');" onmouseout="javascript:setProfix('price_');clearStars('price');" href="javascript:setProfix('price_');setStars(1,'price');"><img id="price_1" title="差(1)" src="http://www.5xsj.net/img/201201/icon_star_2.gif"></a><a onmouseover="javascript:setProfix('price_');showStars(2,'price');" onmouseout="javascript:setProfix('price_');clearStars('price');" href="javascript:setProfix('price_');setStars(2,'price');"><img id="price_2" title="一般(2)" src="http://www.5xsj.net/img/201201/icon_star_2.gif"></a><a onmouseover="javascript:setProfix('price_');showStars(3,'price');" onmouseout="javascript:setProfix('price_');clearStars('price');" href="javascript:setProfix('price_');setStars(3,'price');"><img id="price_3" title="好(3)" src="http://www.5xsj.net/img/201201/icon_star_2.gif"></a><a onmouseover="javascript:setProfix('price_');showStars(4,'price');" onmouseout="javascript:setProfix('price_');clearStars('price');" href="javascript:setProfix('price_');setStars(4,'price');"><img id="price_4" title="很好(4)" src="http://www.5xsj.net/img/201201/icon_star_2.gif"></a><a onmouseover="javascript:setProfix('price_');showStars(5,'price');" onmouseout="javascript:setProfix('price_');clearStars('price');" href="javascript:setProfix('price_');setStars(5,'price');"><img id="price_5" title="非常好(5)" src="http://www.5xsj.net/img/201201/icon_star_2.gif"></a> </span></li>
</ul>
</div>
<div style="clear:both"></div>
</form>
</div>
</body>
</html>