http://jsfiddle.net/dtdxrk/wYABP/embedded/result/
1 <!DOCTYPE HTML> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Js仿淘宝星级评分</title> 6 <style> 7 *{margin:0;padding:0;} 8 body{color:#666;font:12px/1.5 Arial;} 9 h1{font-size: 18px;} 10 ul.star {position:relative;list-style-type:none;} 11 ul.star li{height: 24px;clear: both;} 12 ul.star li label, ul.star li span, ul.star li strong{display: block;float:left;} 13 ul.star li label{margin-right: 5px;} 14 ul.star li strong{margin-left: 5px;} 15 ul.star li span{width:24px;background:url(http://www.codefans.net/jscss/demoimg/201206/star.png) no-repeat;text-indent: -9999px;cursor: pointer;} 16 ul.star li span.active{background-position:0 -28px;} 17 ul.star li strong{color:#f60;font-size: 14px;} 18 ul.star li strong.s{color:#666;font-size: 12px;font-weight: normal;} 19 ul.star p{position:absolute;padding:2px 5px;display:none;background-color: #fff;border: 2px orange solid;z-index: 99;} 20 ul.star p em{color:#f60;font-style:normal;font-weight: bold;} 21 </style> 22 23 </head> 24 <body> 25 26 27 28 <h1>Js仿淘宝星级评分</h1> 29 <ul class="star" id="star"> 30 <p></p> 31 <li id="L1"> 32 <label>宝贝与描述A</label> 33 <span>1分</span> 34 <span>2分</span> 35 <span>3分</span> 36 <span>4分</span> 37 <span>5分</span> 38 <strong></strong> 39 <strong class="s"></strong> 40 </li> 41 <li id="L2"> 42 <label>宝贝与描述B</label> 43 <span>1分</span> 44 <span>2分</span> 45 <span>3分</span> 46 <span>4分</span> 47 <span>5分</span> 48 <strong></strong> 49 <strong class="s"></strong> 50 </li> 51 <li id="L3"> 52 <label>宝贝与描述C</label> 53 <span>1分</span> 54 <span>2分</span> 55 <span>3分</span> 56 <span>4分</span> 57 <span>5分</span> 58 <strong></strong> 59 <strong class="s"></strong> 60 </li> 61 </ul> 62 63 64 <script type="text/javascript"> 65 star("L1", ["很不满意0|差得太离谱，与卖家描述的严重不符，非常不满", "不满意0|部分有破损，与卖家描述的不符，不满意", "一般0|质量一般，没有卖家描述的那么好", "满意0|质量不错，与卖家描述的基本一致，还是挺满意的", "非常满意0|质量非常好，与卖家描述的完全一致，非常满意"]) 66 star("L2", ["很不满意1|差得太离谱，与卖家描述的严重不符，非常不满", "不满意1|部分有破损，与卖家描述的不符，不满意", "一般1|质量一般，没有卖家描述的那么好", "满意1|质量不错，与卖家描述的基本一致，还是挺满意的", "非常满意1|质量非常好，与卖家描述的完全一致，非常满意"]) 67 star("L3", ["很不满意2|差得太离谱，与卖家描述的严重不符，非常不满", "不满意2|部分有破损，与卖家描述的不符，不满意", "一般2|质量一般，没有卖家描述的那么好", "满意2|质量不错，与卖家描述的基本一致，还是挺满意的", "非常满意2|质量非常好，与卖家描述的完全一致，非常满意"]) 68 69 function star(id, aMsg){ //aMsg为数组描述 70 var star = document.getElementById("star"), 71 li = document.getElementById(id), 72 spans = li.getElementsByTagName("span"), 73 p = star.getElementsByTagName("p")[0], 74 strong1 = li.getElementsByTagName("strong")[0], 75 strong2 = li.getElementsByTagName("strong")[1]; 76 var iStar; 77 78 for(var i=0; i<spans.length; i++){ 79 80 //给每个span加一个index 81 spans[i].index = i+1; 82 83 //鼠标移动上添加active 84 spans[i].onmouseover = function(){ 85 onStar(this.index); 86 p.style.display = "block"; 87 p.style.top = (getPosition(this).top-5) + "px"; 88 p.style.left = getPosition(this).left + "px"; 89 }; 90 91 //鼠标移出删除acitve 92 spans[i].onmouseout = function(){ 93 onStar(); 94 p.innerHTML = "<em>" + aMsg[this.index - 1].match(/(.+)\|/)[1] + "</em><br />" + aMsg[this.index - 1].match(/\|(.+)/)[1] 95 p.style.display = ""; 96 }; 97 98 //鼠标点击后进行评分处理 99 spans[i].onclick = function(){ 100 iStar = this.index; 101 strong1.innerHTML = this.innerHTML; 102 strong2.innerHTML = "("+ aMsg[this.index - 1].match(/\|(.+)/)[1] +")"; 103 }; 104 105 }; 106 107 108 //当前访问到第几个index 109 function onStar(spanIndex){ 110 var iScore = spanIndex || iStar; 111 for(var i = 0; i < spans.length; i++){ 112 spans[i].className = (i<iScore ? "active" : ""); 113 } 114 }; 115 116 } 117 118 119 //查找元素位置 120 function getPosition(obj) { 121 var top = 0, 122 left = 0, 123 width = obj.offsetWidth, 124 height = obj.offsetHeight; 125 126 while(obj.offsetParent){ 127 top += obj.offsetTop; 128 left += obj.offsetLeft; 129 obj = obj.offsetParent; 130 } 131 return {"top":top,"left":left,"width":width,"height":height}; 132 } 133 </script> 134 </body> 135 </html>