js网页特效漂亮的星级评价效果-阿里云开发者社区

开发者社区> 开发与运维> 正文

js网页特效漂亮的星级评价效果

简介: js网页特效漂亮的星级评价效果 body{ margin:0;padding:0 10px;color:#333;text-align:center;font:12px Arial,Helvetica,sans-serif; } h1,h2,h3,h4,h...
<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>


源地址:http://www.5xsj.net/Webs_View.asp?id=1094

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章