js星星评分效果图：
项目需求：做拖动的活动星星选取的评分效果。
点评星星有三个事件：
1，当鼠标移过时，点亮最前的星星及跟随之后的星星。
2，当鼠标移开时，如果浏览者未点击过星星；将所有星星都取消点亮。若星星已点击过，点亮之前已点亮的星星。
3，当鼠标点击某个星星时，自动保存该星星的值；以备保存到数据表。
此代码可支持多组星星点评。
完整代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title> evaluate page </title><style type="css/text"></style><meta http-equiv="content-type" content="text/html; charset=gb2312"><meta name="generator" content="editplus"><meta name="keywords" content="key"><meta name="description" content="desc"><style type="text/css">body{ font-size:12px; } span{ margin-left:5px; } div a{ float:left; width:18px; height:17px; background:url("images/img1.jpg") no-repeat; } div .click_on{ background:url("images/img2.jpg") no-repeat; }</style></head><body> <script type="text/<a href="http://www.jb200.com/js/" target="_blank" class="infotextkey">javascript</a>"> <!-- function star_onmouse_over($objName,$index,$msg_id){ $obj=document.getElementsByName($objName); $count=$obj.length; //星星的数量 for ($i=0;$i<$count;$i++ ) { $obj[$i].className=$i<$index?"click_on":""; } // www.jb200.com document.getElementById($msg_id).innerHTML=$obj[$index-1].title; } function star_onmouse_out($objName,$star_val_obj,$msg_id){ $obj=document.getElementsByName($objName); $count=$obj.length; $star_val=document.getElementById($star_val_obj).value; if($star_val==0){ for ($i=0;$i<$count;$i++ ) { $obj[$i].className=""; } document.getElementById($msg_id).innerHTML='<font color="red">请对星星进行评分</font>'; } else{ star_onmouse_over($objName,$star_val,$msg_id) } } function star_onclick($star_val_obj,$index){ document.getElementById($star_val_obj).value=$index; } //--> </script> <h3>您对点评星星效果的意见</h3> <div> <a name="star1[]" title="差" onmouseover="star_onmouse_over(this.name,1,'show_msg')" onmouseout="star_onmouse_out(this.name,'score','show_msg')" onclick="star_onclick('score',1)"></a> <a name="star1[]" title="一般" onmouseover="star_onmouse_over(this.name,2,'show_msg')" onmouseout="star_onmouse_out(this.name,'score','show_msg')" onclick="star_onclick('score',2)"></a> <a name="star1[]" title="好" onmouseover="star_onmouse_over(this.name,3,'show_msg')" onmouseout="star_onmouse_out(this.name,'score','show_msg')" onclick="star_onclick('score',3)"></a> <a name="star1[]" title="很好" onmouseover="star_onmouse_over(this.name,4,'show_msg')" onmouseout="star_onmouse_out(this.name,'score','show_msg')" onclick="star_onclick('score',4)"></a> <a name="star1[]" title="非常好" onmouseover="star_onmouse_over(this.name,5,'show_msg')" onmouseout="star_onmouse_out(this.name,'score','show_msg')" onclick="star_onclick('score',5)"></a> <span id="show_msg"><font color="red">请对星星进行评分</font></span> <input id="score" name="score" type="hidden" value="0"> </div></body></html> |