JS五星级评分效果(类似与淘宝打分效果)
2013-11-26 01:06
375 查看
今天晚上研究下 五星级评分效果,类似于淘宝后台评分效果,如下图所示:
View Code
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({}); });
View Code
JS评分效果源码下载
相关文章推荐
- 纯js实现类似淘宝星级评分功能
- js实现类似淘宝继续拖动查看详情的弹簧效果
- js星级评分点击星级评论打分效果--收藏--转载
- js+css 模仿淘宝评分效果
- 星级评分效果 -js实现
- 仿淘宝购物车,js选择效果
- 用js制作淘宝放大镜效果
- 仿淘宝星级评分效果
- JS实现类似51job上的地区选择效果示例
- JS仿淘宝详情页菜单条智能定位效果
- js淘宝局部放大效果
- 类似淘宝评论的星级评分
- Android控件之RatingBar(类似淘宝实现滑动星级评价效果)
- js放大镜效果。类似于淘宝产品内页多图展示代码,鼠标移到图片上有放大效果,方便查看产品细节,此代码适合网店产品展示,
- 使用JS实现类似屏幕保护效果
- 类似保存或者收藏的js动画效果
- JS实现带提示的星级评分效果完整实例
- JS+DIV+CSS实现类似邮件发送时的蒙板效果
- JS淘宝商品广告效果