1.本人观看了慕课网上的星级评分视频,课程免费,老师讲的特别棒!视频链接:https://www.imooc.com/learn/842

2.在学习完视频后找到了一位大神手敲的代码,在他的Github上下载后,自己手动实现了一遍。源代码稍后贴出原作者的给的链接:http://www.cnblogs.com/fazero/p/8316926.html

3.本人手动模仿实现了一遍代码,学习了好多,再次只贴出最终的可以点亮整颗星与半颗星的javascript代码,如有雷同版权为原作者所有:

<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var rating = (function() {
//继承
var extend = function(subClass, superClass) {
var F = function() {};
F.prototype = superClass.prototype;
subClass.prototype = new F();
subClass.prototype.construtor = subClass;
}

//点亮
var Light = function(el, options) {
this.$el = $(el);
this.$item = this.$el.find('.rating-item');
this.opts = options;
this.add = 1;
this.selectEvent = 'mouseover';
}
Light.prototype.init = function() {
this.lightOn(this.opts.num);
if(!this.readOnly) {
this.bindEvent();
}

}
Light.prototype.lightOn = function(num) {

var num = parseInt(num);

this.$item.each(function(index) {
if(index < num) {
$(this).css('background-position', '0 -40px');
} else {
$(this).css('background-position', '0 0');
}
});
}
Light.prototype.bindEvent = function(e) {
var self = this,
itemLength = self.$item.length;

self.$el.on(self.selectEvent, '.rating-item', function(e) {
var $this = $(this),
num = 0;

self.select(e, $this);
num = $(this).index() + self.add;
self.lightOn(num);

(typeof self.opts.select === 'function') && self.opts.select.call(this, num, itemLength);
self.$el.trigger('select', [num, itemLength]);
}).on('click', '.rating-item', function() {
self.opts.num = $(this).index() + self.add;
(typeof self.opts.chosen === 'function') && self.opts.chosen.call(this, self.opts.num, itemLength);
self.$el.trigger('chosen', [self.opts.num, itemLength]);
}).on('mouseout', function() {
self.lightOn(self.opts.num);
})
}
Light.prototype.select = function() {
throw new Error('子类必须重写此方法');
}
Light.prototype.unbindEvent = function() {
this.$el.off();
}

//点亮整颗
var LightEntire = function(el, options) {
Light.call(this, el, options)
this.selectEvent = 'mouseover';
}

extend(LightEntire, Light);
LightEntire.prototype.lightOn = function(num) {
Light.prototype.lightOn.call(this, num);
}
LightEntire.prototype.select = function() {
self.add = 1;
}

//点亮半颗
var LightHalf = function(el, options) {
Light.call(this, el, options)
this.selectEvent = 'mousemove';
}
extend(LightHalf, Light);
LightHalf.prototype.lightOn = function(num) {

var count = parseInt(num),
isHalf = count !== num;

Light.prototype.lightOn.call(this, count);
if(isHalf) {
this.$item.eq(count).css('background-position', '0 -80px');
}
}
LightHalf.prototype.select = function(e, $this) {
if(e.pageX - $this.offset().left < $this.width() / 2) {
this.add = 0.5;
} else {
this.add = 1;
}
}

// 默认参数
var defaults = {
mode: 'LightEntire',
num: 0,
readOnly: false,
select: function() {},
chosen: function() {}

}
var mode = {
'LightEntire': LightEntire,
'LightHalf': LightHalf
}
//初始化
var init = function(el, option) {
//option可以是object、string
var $el = $(el),
rating = $el.data('rating'),
options = $.extend({}, defaults, typeof option === 'object' && option);
if(!mode[options.mode]) {
options.mode = 'LightEntire';
}

if(!rating) {
//如果还没有实例化,就实例化
$el.data('rating', (rating = new mode[options.mode](el, options)));
rating.init();
}
if(typeof option === 'string') {
rating[option]();
}

}
$.fn.extend({
rating: function(option) {
return this.each(function() {
init(this, option);
})
}
})
return {
init: init
};

})();

rating.init('#rating', {
mode: 'LightHalf',
num: 2.5,
chosen: function() {
rating.init('#rating', 'unbindEvent');
}

})

$('#rating2').rating({
mode: 'LightHalf',
num: 3.5
})

$('#rating3').rating({
mode: 'LightHalf',
num: 3.5
})

$('#rating').on('select', function(e, num, total) {
console.log(num + '/' + total)
}).on('chosen', function(e, num, total) {
console.log(num + '/' + total);
})
</script>

最后的运行结果:

转载于:https://www.cnblogs.com/xiaomai0379/p/8696011.html

慕课网上的星级评分--学习视频后模仿实现相关推荐

  1. 星星评价控件android开发_android自定义星级评分控件,可实现只显示实心星星

    话不多说,上图 近日app需求弄一个等级展示,看了下UI图,只显示实星(点亮的星星).如图 但是网上关于星级评分的例子大多这样 也展示虚心星星 通过自定义Viewpackage com.starsba ...

  2. 一整套的软件测试学习视频、包括web自动化、APP自动化、接口自动化,以及python语言,基础知识讲解和项目实践,学习后可收获python、web/APP/接口自动化测试。

    买的自动化测试学习视频,学完后对自动化测试能力提升了不少,觉得老师讲的很不错,分享给有需要学习的人学习 一.web自动化 百度网盘链接:https://pan.baidu.com/s/1e2fctYu ...

  3. php mysql 星级评分_jQuery+PHP星级评分实现方法_jquery

    本例实现的效果: 过渡动画显示评分操作. 及时更新平均得分和用户所评的分数. 后台限制用户重复评分操作,并在前端及时显示. XHTML HTML结构分为用于显示灰星星div#big_rate.亮星星d ...

  4. js实现星级评分效果(非常规5个li代码)

    1. 前言 此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...

  5. 前端初学者开发学习视频_初学者学习前端开发的实用指南

    前端初学者开发学习视频 by Nikita Rudenko 通过尼基塔·鲁登科(Nikita Rudenko) 初学者学习前端开发的实用指南 (A practical guide to learnin ...

  6. php评星,jQuery+PHP星级评分实现方法

    搜索热词 本例实现的效果: 过渡动画显示评分操作. 及时更新平均得分和用户所评的分数. 后台限制用户重复评分操作,并在前端及时显示. XHTML HTML结构分为用于显示灰星星div#big_rate ...

  7. 吴恩达老师深度学习视频课笔记:总结

    吴恩达老师深度学习视频课网址为:https://mooc.study.163.com/smartSpec/detail/1001319001.htm/?utm_source=weibo.com& ...

  8. 使用 HTML CSS 和 JavaScript 创建星级评分系统

    各位读者好,今天在本博客中,您将学习如何使用 HTML CSS 和 JavaScript 创建星级评分系统 (Widget).早些时候,我还分享了一篇关于Star Rating Widget 的博客, ...

  9. 零基础怎么学习视频剪辑?这篇初剪辑学者指南你一定不要错过

    自从抖音.哔哩哔哩等视频平台的爆火,作为一种技能的视频剪辑开始受到了大众的关注,不少人开始跃跃欲试,但视频剪辑该如何入门,又如何通过学习制作出越来越好的视频呢?本次小鱼整理了视频剪辑最基本的知识,并将 ...

最新文章

  1. tomcat用80port能够启动,可是浏览器不显示tomcat首页
  2. 【基于libRTMP的流媒体直播之 AAC、H264 推送】
  3. ubuntu VMware
  4. c++ 输出二进制_【位运算与状态压缩】二进制的魅力
  5. 【算法】螺旋方阵 上交OJ1021
  6. HDMI显示器驱动设计与验证
  7. 高等数学下-赵立军-北京大学出版社-题解-练习8.3
  8. LeetCode 2074. 反转偶数长度组的节点(链表)
  9. HDU_3786 找出直系亲属- softbar
  10. iframe的2个问题
  11. nginx日志统计分析的相关常用命
  12. 在线常用正则表达式可视化生成与测试工具与示例 Regular Expression
  13. k8s之Deployment滚动更新
  14. Go Module 私有仓库:fatal: could not read Username for ‘https://xxx.com‘: terminal prompts disabled
  15. 何小龙——DRM 驱动程序开发(VKMS)部分代码修正
  16. 使用WP-Salts-Update-CLI自动更新您的WordPress盐
  17. 如何基于 ZEGO SDK 实现 Android 变声/混响/立体声
  18. oracle数据库小记
  19. android studio出现,Android studio 出现缺少sdk的情况,如何解决?
  20. 计算机科学家 本科专业,纽芬兰纪念大学计算机科学本科专业介绍及课程设置...

热门文章

  1. 【转】其实Unix很简单
  2. 合成谬误与公地悲剧(为何设置产品总监职位及核算名义成本)
  3. 如何使用txt文件实现JMeter参数化
  4. Spring MVC视图解析器
  5. php抓取网页css,php 抓取的页面如何处理可以只保留DOM结构,去掉CSS和JS?
  6. 6 redis 编译失败_Redis(NoSQL数据库)基础篇
  7. stata 倾向得分匹配(二)偏差校正匹配估计量
  8. 小程序开发好学吗?需要掌握哪些知识技能?
  9. 生成图片_GitHub Star 3.2K Java 图片缩略图生成库
  10. java团队名字_作为一名Java工程师,我在DevOps团队都经历了什么