本文共 4490 字,大约阅读时间需要 14 分钟。
效果
css
.star ul,.star 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('../img/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;}
html
js
function Score(options) { // 定义一个类 this.config = { selector: '.star', // 评分容器 renderCallback: null, // 渲染页面后回调 callback: null // 点击评分回调 }; this.cache = { 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 = '' + ''; $(_config.selector).each(function(index, item) { $(item).append(html); $(item).wrap($(' ')); 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' }); }); // 鼠标移出 $(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; var score = index + 1; !$('p', parentCls).hasClass('hidden') && $('p', parentCls).addClass('hidden'); var html = '' + score + '分'; $('.desc', parentCls).html(html); // 加入分数 $(this).parents(_config.selector).find('.value-container').val(score); // $(_config.selector).find('.value-container').val(score); _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" : ""; } } }};
这里有两种方式
1.针对所有的.star的 2.针对具体的.star的$(function() { //var score = new Score(); // 不传参数,默认是.star var goods_score = new Score({ selector:'#goods.star'}); // 传参数,只针对id为goods的.star var logistics_score = new Score({ selector:'#logistics.star'});});
转载地址:http://qlgum.baihongyu.com/