今天晚上研究下 五星級評分效果，類似於淘寶後臺評分效果，如下圖所示：
思路： 當滑鼠移到一顆星的時候 判斷當前的索引 當前及當前的索引前面的星星亮起來 每當移到任何一顆星星時候 下面跟隨提示 mouseout時候 提示消失，移出時 全部變灰。每當點選一顆星星時候 同樣判斷當前的索引 當前及當前之前的星星都亮起來，mouseout時候 點選時候的星星(亮) 同樣保持亮的狀態。
HTML程式碼如下：
1 <div class="star"> 2 <span>js星級評論打分</span> 3 <ul> 4 <li><a href="javascript:;">1</a></li> 5 <li><a href="javascript:;">2</a></li> 6 <li><a href="javascript:;">3</a></li> 7 <li><a href="javascript:;">4</a></li> 8 <li><a href="javascript:;">5</a></li> 9 </ul> 10 </div>
css程式碼如下：
1 <style> 2 *{margin:0;padding:0;font-size:13px;} 3 ul,li{list-style:none;} 4 .star {position:relative;width:600px;height:24px; margin:20px auto 0;} 5 .star span {float:left;height:19px;line-height:19px;} 6 .star ul{margin:0 10px;} 7 .star li{float:left;width:24px;height:22px;text-indent:-9999px;background:url('star.png') no-repeat;cursor:pointer;} 8 .star li.on{background-position:0 -28px;} 9 .star p {background:url('icon.gif') no-repeat;padding:10px 10px 0;position:absolute;top:20px;width:159px;height:60px;z-index:100;} 10 .star p em {color: #FF6600;display: block;font-style: normal;} 11 .star strong {color:#ff6600;padding-left:10px;} 12 .hidden{display:none;} 13 </style>
JS程式碼如下：
1 /** 2 * JS評分效果 3 */ 4 function Score(options) { 5 this.config = { 6 selector : '.star', // 評分容器 7 renderCallback : null, // 渲染頁面後回撥 8 callback : null // 點選評分回撥 9 }; 10 11 this.cache = { 12 aMsg : [ 13 "很不滿意|差得太離譜，與賣家描述的嚴重不符，非常不滿", 14 "不滿意|部分有破損，與賣家描述的不符，不滿意", 15 "一般|質量一般，沒有賣家描述的那麼好", 16 "滿意|質量不錯，與賣家描述的基本一致，還是挺滿意的", 17 "非常滿意|質量非常好，與賣家描述的完全一致，非常滿意" 18 ], 19 iStar : 0, 20 iScore : 0 21 }; 22 23 this.init(options); 24 } 25 26 Score.prototype = { 27 28 constructor: Score, 29 30 init: function(options){ 31 this.config = $.extend(this.config,options || {}); 32 var self = this, 33 _config = self.config, 34 _cache = self.cache; 35 36 self._renderHTML(); 37 }, 38 _renderHTML: function(){ 39 var self = this, 40 _config = self.config; 41 var html = '<span class="desc"></span>' + 42 '<p class="star-p hidden"></p>'; 43 $(_config.selector).each(function(index,item){ 44 $(item).append(html); 45 $(item).wrap($('<div class="parentCls" style="position:relative"></div>')); 46 var parentCls = $(item).closest('.parentCls'); 47 self._bindEnv(parentCls); 48 }); 49 50 }, 51 _bindEnv: function(parentCls){ 52 var self = this, 53 _config = self.config, 54 _cache = self.cache; 55 56 $(_config.selector + ' li',parentCls).each(function(index,item){ 57 58 // 滑鼠移上 59 $(item).mouseover(function(e){ 60 var offsetLeft = $('ul',parentCls)[0].offsetLeft; 61 ismax(index + 1); 62 63 $('p',parentCls).hasClass('hidden') && $('p',parentCls).removeClass('hidden'); 64 $('p',parentCls).css({'left':index*$(this).width() + 12 + 'px'}); 65 66 67 var html = '<em>' + 68 '<b>'+index+'</b>分 '+_cache.aMsg[index].split('|')[0]+'' + 69 '</em>' + _cache.aMsg[index].split('|')[1]; 70 $('p',parentCls).html(html); 71 }); 72 73 // 滑鼠移出 74 $(item).mouseout(function(){ 75 ismax(); 76 !$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden'); 77 }); 78 79 // 滑鼠點選 80 $(item).click(function(e){ 81 var index = $(_config.selector + ' li',parentCls).index($(this)); 82 _cache.iStar = index + 1; 83 84 !$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden'); 85 var html = '<strong>' + 86 index + 87 '分</strong>' +_cache.aMsg[index].split('|')[1]; 88 89 $('.desc',parentCls).html(html); 90 _config.callback && $.isFunction(_config.callback) && _config.callback(); 91 }); 92 93 }); 94 95 function ismax(iArg) { 96 _cache.iScore = iArg || _cache.iStar; 97 var lis = $(_config.selector + ' li',parentCls); 98 99 for(var i = 0; i < lis.length; i++) { 100 lis[i].className = i < _cache.iScore ? "on" : ""; 101 } 102 } 103 } 104 }; 105 106 $(function(){ 107 new Score({}); 108 });