Js仿淘宝星级评分

效果预览:

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>
posted @ 2012-07-23 10:10  dtdxrk  阅读(867)  评论(3)  编辑  收藏  举报