1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>星级评分系统</title> 6 <style> 7 body,div,ul,li,p{margin:0;padding:0;} 8 body{color:#666;font:12px/1.5 Arial;} 9 ul{list-style-type:none;} 10 #star{position:relative;600px;margin:10px auto;} 11 #star ul,#star span{float:left;display:inline;height:19px;line-height:19px;} 12 #star ul{margin:0 10px;} 13 #star li{float:left;24px;cursor:pointer;text-indent:-9999px;background:url(/jscss/demoimg/201206/star.png) no-repeat;} 14 #star strong{color:#f60;padding-left:10px;} 15 #star li.on{background-position:0 -28px;} 16 #star p{position:absolute;top:20px;159px;height:60px;display:none;background:url(/jscss/demoimg/201206/icon.gif) no-repeat;padding:7px 10px 0;} 17 #star p em{color:#f60;display:block;font-style:normal;} 18 </style> 19 <script type="text/javascript"> 20 window.onload = function () 21 { 22 var oStar = document.getElementById("star"); 23 var aLi = oStar.getElementsByTagName("li"); 24 var oUl = oStar.getElementsByTagName("ul")[0]; 25 var oSpan = oStar.getElementsByTagName("span")[1]; 26 var oP = oStar.getElementsByTagName("p")[0]; 27 var i = iScore = iStar = 0; 28 var aMsg = [ 29 "很不满意|差得太离谱，与卖家描述的严重不符，非常不满", 30 "不满意|部分有破损，与卖家描述的不符，不满意", 31 "一般|质量一般，没有卖家描述的那么好", 32 "满意|质量不错，与卖家描述的基本一致，还是挺满意的", 33 "非常满意|质量非常好，与卖家描述的完全一致，非常满意" 34 ] 35 36 for (i = 1; i <= aLi.length; i++) 37 { 38 aLi[i - 1].index = i; 39 //鼠标移过显示分数 40 aLi[i - 1].onmouseover = function () 41 { 42 fnPoint(this.index); 43 //浮动层显示 44 oP.style.display = "block"; 45 //计算浮动层位置 46 oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px"; 47 //匹配浮动层文字内容 48 oP.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)\|/)[1] + "</em>" + aMsg[this.index - 1].match(/\|(.+)/)[1] 49 }; 50 //鼠标离开后恢复上次评分 51 aLi[i - 1].onmouseout = function () 52 { 53 fnPoint(); 54 //关闭浮动层 55 oP.style.display = "none" 56 }; 57 //点击后进行评分处理 58 aLi[i - 1].onclick = function () 59 { 60 iStar = this.index; 61 oP.style.display = "none"; 62 oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/\|(.+)/)[1] + ")" 63 } 64 } 65 //评分处理 66 function fnPoint(iArg) 67 { 68 //分数赋值 69 iScore = iArg || iStar; 70 for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : ""; 71 } 72 }; 73 </script> 74 </head> 75 <body> 76 <div id="star"> 77 <span>点击星星就能打分</span> 78 <ul> 79 <li><a href="javascript:;">1</a></li> 80 <li><a href="javascript:;">2</a></li> 81 <li><a href="javascript:;">3</a></li> 82 <li><a href="javascript:;">4</a></li> 83 <li><a href="javascript:;">5</a></li> 84 </ul> 85 <span></span> 86 <p></p> 87 </div> 88 </body> 89 </html>
http://www.codefans.net/jscss/code/3458.shtml