前面有一篇原生js实现星级评分 。可能覆盖面不是很广,现在给出一个jquery实现的星级评分
<div class="star"> <span>jQuery星级评论打分</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>
<style> *{margin:0;padding:0;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 {padding:10px 10px 0;position:absolute;top:20px;width:159px;height:60px;z-index:100;} .star p em {color: #FF6600;display: block;font-style: normal;} .star strong {color:#ff6600;padding-left:10px;} .hidden{display:none;} </style>
<script type="text/javascript" src="http://s.thsi.cn/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="score.js"></script> </head> <body> <script type="text/javascript"> $(function(){ var score = new Score({ callback: function(cfg) { console.log(cfg.starAmount); } }); }); </script>
/** * JQ评分效果 */ 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); _config.renderCallback && $.isFunction(_config.renderCallback) && _config.renderCallback(); }); }, _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({starAmount:_cache.iStar}); }); }); 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" : ""; } } } };
这个也是在网上找的一个相对自己来说更实用一点的。做储备。