JS五星级评分效果(类似与淘宝打分效果)

今天晚上研究下 五星级评分效果，类似于淘宝后台评分效果，如下图所示：

思路： 当鼠标移到一颗星的时候 判断当前的索引 当前及当前的索引前面的星星亮起来 每当移到任何一颗星星时候 下面跟随提示 mouseout时候 提示消失，移出时 全部变灰。每当点击一颗星星时候 同样判断当前的索引 当前及当前之前的星星都亮起来，mouseout时候 点击时候的星星(亮) 同样保持亮的状态。

HTML代码如下：

 <div class="star">

         <span>js星级评论打分</span>

         <ul>

             <li><a href="javascript:;">1</a></li>

             <li><a href="javascript:;">2</a></li>

             <li><a href="javascript:;">3</a></li>

             <li><a href="javascript:;">4</a></li>

             <li><a href="javascript:;">5</a></li>

         </ul>

     </div>

css代码如下：

 <style>

     *{margin:;padding:;font-size:13px;}

      ul,li{list-style:none;}

      .star {position:relative;width:600px;height:24px; margin:20px auto 0;}

      .star span {float:left;height:19px;line-height:19px;}

      .star ul{margin:0 10px;}

      .star li{float:left;width:24px;height:22px;text-indent:-9999px;background:url('star.png') no-repeat;cursor:pointer;}

      .star li.on{background-position:0 -28px;}

      .star p {background:url('icon.gif') no-repeat;padding:10px 10px 0;position:absolute;top:20px;width:159px;height:60px;z-index:;}

      .star p em {color: #FF6600;display: block;font-style: normal;}

      .star strong {color:#ff6600;padding-left:10px;}

      .hidden{display:none;}

   </style>

JS代码如下：

 /**

  * JS评分效果

  */

  function Score(options) {

     this.config = {

         selector                  :   '.star',     // 评分容器

         renderCallback            :   null,        // 渲染页面后回调

         callback                  :   null         // 点击评分回调

     };

     this.cache = {

         aMsg : [

                 "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",

                 "不满意|部分有破损，与卖家描述的不符，不满意",

                 "一般|质量一般，没有卖家描述的那么好",

                 "满意|质量不错，与卖家描述的基本一致，还是挺满意的",

                 "非常满意|质量非常好，与卖家描述的完全一致，非常满意"

                 ],

         iStar  : 0,

         iScore : 0

     };

     this.init(options);

  }

  Score.prototype = {

     constructor: Score,

     init: function(options){

         this.config = $.extend(this.config,options || {});

         var self = this,

             _config = self.config,

             _cache = self.cache;

         self._renderHTML();

     },

     _renderHTML: function(){

         var self = this,

             _config = self.config;

         var html = '<span class="desc"></span>' +

                    '<p class="star-p hidden"></p>';

         $(_config.selector).each(function(index,item){

             $(item).append(html);

             $(item).wrap($('<div class="parentCls" style="position:relative"></div>'));

             var parentCls = $(item).closest('.parentCls');

             self._bindEnv(parentCls);

         });

     },

     _bindEnv: function(parentCls){

         var self = this,

             _config = self.config,

             _cache = self.cache;

         $(_config.selector + ' li',parentCls).each(function(index,item){

             // 鼠标移上

             $(item).mouseover(function(e){

                 var offsetLeft = $('ul',parentCls)[0].offsetLeft;

                 ismax(index + 1);

                 $('p',parentCls).hasClass('hidden') && $('p',parentCls).removeClass('hidden');

                 $('p',parentCls).css({'left':index*$(this).width() + 12 + 'px'});

                 var html = '<em>' +

                               '<b>'+index+'</b>分 '+_cache.aMsg[index].split('|')[0]+'' +

                            '</em>' + _cache.aMsg[index].split('|')[1];

                 $('p',parentCls).html(html);

             });

             // 鼠标移出

             $(item).mouseout(function(){

                 ismax();

                  !$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden');

             });

             // 鼠标点击

             $(item).click(function(e){

                 var index = $(_config.selector + ' li',parentCls).index($(this));

                 _cache.iStar = index + 1;

                 !$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden');

                 var html = '<strong>' +

                                 index +

                            '分</strong>' +_cache.aMsg[index].split('|')[1];

                 $('.desc',parentCls).html(html);

                 _config.callback && $.isFunction(_config.callback) && _config.callback();

             });

         });

         function ismax(iArg) {

             _cache.iScore = iArg || _cache.iStar;

             var lis = $(_config.selector + ' li',parentCls);

             for(var i = 0; i < lis.length; i++) {

                 lis[i].className = i < _cache.iScore ? "on" : "";

             }

         }

     }

  };

  $(function(){

     new Score({});

  });

JS评分效果源码下载