求一个评分的JS效果。。。

具体点。。
我是这样实现的：
<input type="radio" name="rank" value="2">1
<input name="rank" type="radio" value="3">2
<input type="radio" name="rank" value="4">3
怎么转化成那种效果？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

脚本函数在 http://www.uume.com/js/new_play.js<!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=gb2312" />
<title>无标题文档</title>
<link href="/css/common.css" rel="stylesheet" type="text/css" />
<link href="/css/play.css" rel="stylesheet" type="text/css" />
<link href="/css/play_frame.css" rel="stylesheet" type="text/css" />
<script language="javascript">
var star = 0;function show_opinion(id){
if(id == '1')
document.getElementById('opinion').innerHTML = "没劲";
else if(id == '2')
document.getElementById('opinion').innerHTML = "没啥特别";
else if(id == '3')
document.getElementById('opinion').innerHTML = "值得一看";
else if(id == '4')
document.getElementById('opinion').innerHTML = "令人敬畏";
else if(id == '5')
document.getElementById('opinion').innerHTML = "太有才了";
else
document.getElementById('opinion').innerHTML = "评分状态";
}//鼠标移上
function show_blue(id){
show_opinion(id);
for(var i = 1;i <= id;i++){
document.getElementById('star'+i).src='http://www.uume.com/images_new/star_blue.gif';
}
for(var j = (id+1);j <= 5;j++){
document.getElementById('star'+j).src='http://www.uume.com/images_new/star_gary.gif';
}
}function show_gary(id){
for(var i = (star+1);i <=5;i++){
document.getElementById('star'+i).src='http://www.uume.com/images_new/star_gary.gif';
clear_option();
}
for(var j = 1 ;j <=star;j++){
document.getElementById('star'+j).src='http://www.uume.com/images_new/star_orange.gif';
clear_option();
}
}
function clear_option(){
document.getElementById('opinion').innerHTML = "";
}
//play页显示投票信息
function star_show(){
var orange_num = "u";
var gary_num = 5-orange_num;
if(orange_num == 0){
//document.write('<img id="star1" src="images/star_orange.gif" onclick="doPoll(1)" onmouseover="showBlueStar(\'1\')" onmouseout="showOrangeStar(\'1\')" style="cursor:hand;cursor:pointer;"/> <img id="star2" src="images/star_orange.gif" onclick="doPoll(2)" onmouseover="showBlueStar(\'2\')" onmouseout="showOrangeStar(\'2\')" style="cursor:hand;cursor:pointer;"/> <img id="star3" src="images/star_orange.gif" onclick="doPoll(3)" onmouseover="showBlueStar(\'3\')" onmouseout="showOrangeStar(\'3\')" style="cursor:hand;cursor:pointer;"/> <img id="star4" src="images/star_orange.gif" onclick="doPoll(4)" onmouseover="showBlueStar(\'4\')" onmouseout="showOrangeStar(\'4\')" style="cursor:hand;cursor:pointer;"/> <img id="star5" src="images/star_orange.gif" onclick="doPoll(5)" onmouseover="showBlueStar(\'5\')" onmouseout="showOrangeStar(\'5\')" style="cursor:hand;cursor:pointer;"/><br />');
var poll_value = parseInt(video_poll_value);
var poll_num = parseInt(video_poll_number);
var star = 0;
if(poll_num != 0){
star = parseInt(poll_value/poll_num);
for(var i=1;i<=star;i++)
document.write('<img id="star'+i+'"src="http://www.uume.com/images_new/star_orange.gif" onclick="do_poll('+i+')" onmouseover="show_blue('+i+')" onmouseout="show_gary('+i+')" style="cursor:hand;cursor:pointer;"/> ');
for(var i=star+1;i<=5;i++)
document.write('<img id="star'+i+'"src="http://www.uume.com/images_new/star_gary.gif" onclick="do_poll('+i+')" onmouseover="show_blue('+i+')" onmouseout="show_gary('+i+')" style="cursor:hand;cursor:pointer;"/> ');
}else{
for(var i = 1; i <= 5; i++)
document.write('<img id="star'+i+'" src="http://www.uume.com/images_new/star_gary.gif" onclick="do_poll('+i+')" onmouseover="show_blue('+i+')" onmouseout="show_gary('+i+')" style="cursor:hand;cursor:pointer;"/> ');
}
}else{
while(orange_num > 0){
document.write('<img src="http://www.uume.com/images_new/star_blue.gif" /> ');
orange_num--;
}
while(gary_num > 0){
document.write('<img src="http://www.uume.com/images_new/star_gary.gif" /> ');
gary_num--;
}
}
}
//投票
function do_poll(point){
video_poll_number = parseInt(video_poll_number)+1;
//send_poll('poll',parseInt(point));
//document.getElementById('pollCount').innerHTML = video_poll_number;
}
function send_poll(act,value){
//VideoPlay.doPoll(video_uuid,value,pollcallback);
//stat.connect(statUrl,"action=poll&uuid="+video_uuid,statCallback);
}</script>
</head><body>
<DIV class=uinfo_conbox><DIV id=play_stars
style="DISPLAY: inline; MARGIN-LEFT: 40px; WIDTH: 280px">
<DIV style="DISPLAY: inline; FLOAT: left; WIDTH: 50px"><SPAN
class=txt_orange>评分：</SPAN></DIV>
<DIV style="DISPLAY: inline; FLOAT: left; WIDTH: 150px">
<SCRIPT language=javascript>star_show();</SCRIPT>
<IMG id=star1 onmouseover=show_blue(1) style="CURSOR: pointer"
onclick=do_poll(1) onmouseout=show_gary(1)
src="http://www.uume.com/images_new/star_gary.gif"> <IMG id=star2 onmouseover=show_blue(2)
style="CURSOR: pointer" onclick=do_poll(2) onmouseout=show_gary(2)
src="http://www.uume.com/images_new/star_gary.gif"> <IMG id=star3 onmouseover=show_blue(3)
style="CURSOR: pointer" onclick=do_poll(3) onmouseout=show_gary(3)
src="http://www.uume.com/images_new/star_gary.gif"> <IMG id=star4 onmouseover=show_blue(4)
style="CURSOR: pointer" onclick=do_poll(4) onmouseout=show_gary(4)
src="http://www.uume.com/images_new/star_gary.gif"> <IMG id=star5 onmouseover=show_blue(5)
style="CURSOR: pointer" onclick=do_poll(5) onmouseout=show_gary(5)
src="http://www.uume.com/images_new/star_gary.gif">  </DIV>
<DIV style="DISPLAY: inline; FLOAT: left"><SPAN id=opinion></SPAN></DIV></DIV>
<DIV>人气：<SPAN class=txt_orange>5561次</SPAN></DIV>
</DIV>
<DIV></DIV>
</body>
</html>
谢谢。。非常感谢~！
   请问怎么把评分的值提交到文件处理呢？
<input type="radio" name="rank" value="2" >1
这个可以保存字段rank ，但你给的那个怎么弄呢？
  也就是说怎么判断用户选择的值呢？
并把这个值传过去
    这个也没form表单，我不知道该怎么传。
  麻烦你再指点下
给大家推荐一个JAVASCRIPT站点，http://www.tutejs.cn，来这里可以看到很多JAVASCRIPT。
给大家推荐一个JAVASCRIPT站点，http://www.tutejs.cn，来这里可以看到很多JAVASCRIPT。
function do_poll(point){
    send_poll('poll',parseInt(point));
}
function send_poll(act,value){
stat.connect(statUrl,"action=soft_add_action.php?rank="+value,statCallback);
}
function statCallback(data){
}用send_poll这个函数传递的参数。。怎么总是提示JS错误呢？  高手帮忙看下
stat.connect(statUrl,"action=soft_add_action.php?rank="+value,statCallback); 是一个异步请求这样可以实现提交数据而页面的不刷新建议你有点耐心将那个网页包含的所有脚本下载下了研究下他的处理是很完善的值得借鉴
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>等级选择器五角星 :: GouFangFw Example</title>

<style type="text/css">
body,td{font-size:12px;}
.star-rating{list-style:none;margin: 0px;padding:0px;width: 100px;height: 20px;position: relative;background: url(star_rating.gif) top left repeat-x;}
.star-rating li{padding:0px;margin:0px;float: left;}
.star-rating li a{display:block;width:20px;height: 20px;text-decoration: none;text-indent: -9000px;z-index: 20;position: absolute;padding: 0px;}
.star-rating li a:hover{background: url(star_rating.gif) left bottom;z-index: 1;left: 0px;}
.star-rating a.one, .star-rating a.two, .star-rating a.three, .star-rating a.four, .star-rating a.five{background: url(star_rating.gif) left bottom;z-index: 1;left: 0px;}.star-rating a.one-star{left: 0px;}
.star-rating a.one-star:hover, .star-rating a.one{width:20px;}.star-rating a.two-stars{left:20px;}
.star-rating a.two-stars:hover, .star-rating a.two{width: 40px;}.star-rating a.three-stars{left: 40px;}
.star-rating a.three-stars:hover, .star-rating a.three{width: 60px;}.star-rating a.four-stars{left: 60px;}
.star-rating a.four-stars:hover, .star-rating a.four{width: 80px;}.star-rating a.five-stars{left: 80px;}
.star-rating a.five-stars:hover, .star-rating a.five{width: 100px;}
</style>
</head>
<body>
<h2>等级选择器五角星</h2>
<hr>
<h5>选择：</h5>
<ul id="a" class="star-rating" style="display:none" onMouseOut="$('b').style.display='';$('a').style.display='none';">
<li><a href="#" title="一颗星" class="one-star">1</a></li>
<li><a href="#" title="二颗星" class="two-stars">2</a></li>
<li><a href="#" title="三颗星" class="three-stars">3</a></li>
<li><a href="#" title="四颗星" class="four-stars">4</a></li>
<li><a href="#" title="五颗星" class="five-stars">5</a></li>
</ul>
<ul id="b" class="star-rating" onMouseMove="$('b').style.display='none';$('a').style.display=''">
<li><a href="javascript:" class="three">星</a></li>
</ul>

<pre>
使用说明：要注意在本测试用例中，重点要理解class的使用；
通过例子可以直观理解，等级选择器是俩个层的交替隐藏显示，如本例中id=‘b’为显示效果，id=‘a’为选择效果；
等级选择器是由俩个ul表示的；代码已经定义死，直接引用就可以了；

如上效果中id=‘b’是在页面加载中定义的；可以参考下边的星的表现效果赋值；

如果页面中不止一个等级选择器，可以通过修改id的形式复制多个；注意修改onMouseOut、onMouseMove中的脚本；

以下是可以使用其它鼠标事件：
onClick：    鼠标单击事件。   （是指鼠标按下，然后松开时产生。）
onDblClick：鼠标双击事件。   （是指鼠标快速按下，松开，并再次按下时产生。）

onMouseDown：鼠标按下事件。   （鼠标按下时即产生。）
onMouseUp：  鼠标释放事件。   （是指鼠标从按下的状态到弹起。）

onMouseMove：鼠标移动事件。   （是指在特定元素上移动鼠标。）
onMouseOver：鼠标经过事件。   （是指，当指针从外界往元素上移动时产生。）
onMouseOut：鼠标离开事件。   （是指鼠标从特定元素上离开时产生。）

onLoad：     载入事件。       （当图象或页面结束载入时产生。）
onUnload：   卸载事件。       （当访问者离开页面时产生。）

onScroll：   滚动条滚动事件。（当访问者使用卷轴上移或下移时产生。）
</pre>

<h5>以下是星的表现效果：</h5>
<ul class="star-rating">
<li><a href="javascript:" class="one">星</a></li>
</ul>
<ul class="star-rating">
<li><a href="javascript:" class="two">星</a></li>
</ul>
<ul class="star-rating">
<li><a href="javascript:" class="three">星</a></li>
</ul>
<ul class="star-rating">
<li><a href="javascript:" class="four">星</a></li>
</ul>
<ul class="star-rating">
<li><a href="javascript:" class="five">星</a></li>
</ul>
<script type="text/javascript">
$ = (function (objid) {if (arguments.length > 1) {for (var i = 0, objids = [], length = arguments.length; i < length; i++) {objids.push(this.$(arguments[i]));}return objids;}if (typeof objid == "string") {objid = document.getElementById(objid);}return objid;});
</script>
</body>
</html>