<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>评价</title>
<script type="text/javascript">
function give_value(obj){
var status=true;
var parent_obj=obj.parentNode;
var i=0;
while(status){
i++;
if(parent_obj.nodeName=="UL"){break;}
parent_obj=parent_obj.parentNode;
if(i>1000){break;}//防止找不到ul发生死循环
}
var hidden_input=parent_obj.getElementsByTagName("input")[0];
if(hidden_input.length<1){/*alert("sorry?\nprogram error!")*/;}
var txt=obj.firstChild.nodeValue;//确保不能存在空格哦，因为这里用的firstChild
if(isNaN(parseInt(txt,10))){/*alert('level error!')*/;return false;}
hidden_input.setAttribute("value",txt.toString());
//固定选中状态,先找到初始化颜色那个li
var current_li=parent_obj.getElementsByTagName("li");
var length=current_li.length;
var ok_li_obj=null;
for(var i=0;i<length;i++){
if(current_li[i].className.indexOf("current_rating")>=0){
ok_li_obj=current_li[i];break;//找到
}
}
__current_width=txt*14;
ok_li_obj.style.width=__current_width+"px";
return false;
}
</script>
<style>
.star_rating {list-style:none;margin:-1px 0 0 -1px; padding:0; width:70px; height:12px; position:relative; background:url(images/rating_stars.gif) 0 0 repeat-x; overflow:hidden;font-size:0;}
.star_rating li{padding:0;margin:0;float:left;}
.star_rating li a{display:block;width:14px;height:12px;text-decoration:none;text-indent:-9000px;z-index:20;position:absolute;padding:0;margin:0;}
.star_rating li a:hover{background: url(images/rating_stars.gif) 0 12px;z-index:2;left:0;}
.star_rating a.one_star{left:0;}
.star_rating a.one_star:hover{width:14px;}
.star_rating a.two_stars{left:14px;}
.star_rating a.two_stars:hover{width:28px;}
.star_rating a.three_stars{left:28px;}
.star_rating a.three_stars:hover{width:42px;}
.star_rating a.four_stars{left:42px;}
.star_rating a.four_stars:hover{width:56px;}
.star_rating a.five_stars{left:56px;}
.star_rating a.five_stars:hover{width:70px;}
.star_rating li.current_rating{background:url(images/rating_stars.gif) 0 24px;position:absolute;height:12px;display:block;text-indent:-9000px;z-index:1;left:0;}
/*end star.css*/
#star_level{margin:0 0 20px 20px;}
#star_level p{margin:20px 0 5px 0;}
</style>
</head>
<body>
<table id="register" class="CENTER" cellpadding="0" cellspacing="0">
<tr>
<td>
<span id="spanLeft1" class="FLOATLEFT">采购订单代码：XXXXXX</span>
</td>
</tr>
<tr>
<td>
<table id="registCnt" class="CENTER" cellpadding="2px;" cellspacing="0">
<tr class="TITLE">
<td>产品代码及名称</td>
<td>评价分值</td>
<td></td>
</tr>
<tr>
<td>XXXX</td>
<td>
<ul class="star_rating">
<li style="display:none;">
<input type="text" name="price" value="" />
</li>
<li class="current_rating">default level</li>
<li><a href="#" title="1 of 5 stars" class="one_star" onclick="give_value(this);">1</a></li>
<li><a href="#" title="2 of 5 stars" class="two_stars" onclick="give_value(this);">2</a></li>
<li><a href="#" title="3 of 5 stars" class="three_stars" onclick="give_value(this);">3</a></li>
<li><a href="#" title="4 of 5 stars" class="four_stars" onclick="give_value(this);">4</a></li>
<li><a href="#" title="5 of 5 stars" class="five_stars" onclick="give_value(this);">5</a></li>
</ul>
</td>
<td><input type="button" class="BUTTON" value="确定" /></td>
</tr>
<tr>
<td>XXXX</td>
<td>
<ul class="star_rating">
<li style="display:none;">
<input type="text" name="price" value="" />
</li>
<li class="current_rating">default level</li>
<li><a href="#" title="1 of 5 stars" class="one_star" onclick="give_value(this);">1</a></li>
<li><a href="#" title="2 of 5 stars" class="two_stars" onclick="give_value(this);">2</a></li>
<li><a href="#" title="3 of 5 stars" class="three_stars" onclick="give_value(this);">3</a></li>
<li><a href="#" title="4 of 5 stars" class="four_stars" onclick="give_value(this);">4</a></li>
<li><a href="#" title="5 of 5 stars" class="five_stars" onclick="give_value(this);">5</a></li>
</ul>
</td>
<td><input type="button" class="BUTTON" value="确定" /></td>
</tr>
<tr>
<td>XXXX</td>
<td>
<ul class="star_rating">
<li style="display:none;">
<input type="text" name="price" value="" />
</li>
<li class="current_rating">default level</li>
<li><a href="#" title="1 of 5 stars" class="one_star" onclick="give_value(this);">1</a></li>
<li><a href="#" title="2 of 5 stars" class="two_stars" onclick="give_value(this);">2</a></li>
<li><a href="#" title="3 of 5 stars" class="three_stars" onclick="give_value(this);">3</a></li>
<li><a href="#" title="4 of 5 stars" class="four_stars" onclick="give_value(this);">4</a></li>
<li><a href="#" title="5 of 5 stars" class="five_stars" onclick="give_value(this);">5</a></li>
</ul>
</td>
<td><input type="button" class="BUTTON" value="确定" /></td>
</tr>
<tr>
<td>XXXX</td>
<td>
<ul class="star_rating">
<li style="display:none;">
<input type="text" name="price" value="" />
</li>
<li class="current_rating">default level</li>
<li><a href="#" title="1 of 5 stars" class="one_star" onclick="give_value(this);">1</a></li>
<li><a href="#" title="2 of 5 stars" class="two_stars" onclick="give_value(this);">2</a></li>
<li><a href="#" title="3 of 5 stars" class="three_stars" onclick="give_value(this);">3</a></li>
<li><a href="#" title="4 of 5 stars" class="four_stars" onclick="give_value(this);">4</a></li>
<li><a href="#" title="5 of 5 stars" class="five_stars" onclick="give_value(this);">5</a></li>
</ul>
</td>
<td><input type="button" class="BUTTON" value="确定" /></td>
</tr>
<tr>
<td>XXXX</td>
<td>
<ul class="star_rating">
<li style="display:none;">
<input type="text" name="price" value="" />
</li>
<li class="current_rating">default level</li>
<li><a href="#" title="1 of 5 stars" class="one_star" onclick="give_value(this);">1</a></li>
<li><a href="#" title="2 of 5 stars" class="two_stars" onclick="give_value(this);">2</a></li>
<li><a href="#" title="3 of 5 stars" class="three_stars" onclick="give_value(this);">3</a></li>
<li><a href="#" title="4 of 5 stars" class="four_stars" onclick="give_value(this);">4</a></li>
<li><a href="#" title="5 of 5 stars" class="five_stars" onclick="give_value(this);">5</a></li>
</ul>
</td>
<td><input type="button" class="BUTTON" value="确定" /></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
js+CSS 星级评分 多级 通用 实例
5星 · 超过95%的资源 需积分: 10 38 浏览量
2011-11-05
14:58:52
上传
评论
收藏 54KB RAR 举报 
star_rating.rar （3个子文件） 
images 
rating_stars.gif 728B
Thumbs.db 98KB
evaluate.html 8KB资源评论
youyu1682013-01-22可以使用！- tyxy_12182015-04-17挺好用的，可以试试~
ALihexingyu2013-07-19可以使用，不错
