慕课网上的星级评分--学习视频后模仿实现
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
慕课网上的星级评分--学习视频后模仿实现相关推荐
- 星星评价控件android开发_android自定义星级评分控件,可实现只显示实心星星
话不多说,上图 近日app需求弄一个等级展示,看了下UI图,只显示实星(点亮的星星).如图 但是网上关于星级评分的例子大多这样 也展示虚心星星 通过自定义Viewpackage com.starsba ...
- 一整套的软件测试学习视频、包括web自动化、APP自动化、接口自动化,以及python语言,基础知识讲解和项目实践,学习后可收获python、web/APP/接口自动化测试。
买的自动化测试学习视频,学完后对自动化测试能力提升了不少,觉得老师讲的很不错,分享给有需要学习的人学习 一.web自动化 百度网盘链接:https://pan.baidu.com/s/1e2fctYu ...
- php mysql 星级评分_jQuery+PHP星级评分实现方法_jquery
本例实现的效果: 过渡动画显示评分操作. 及时更新平均得分和用户所评的分数. 后台限制用户重复评分操作,并在前端及时显示. XHTML HTML结构分为用于显示灰星星div#big_rate.亮星星d ...
- js实现星级评分效果(非常规5个li代码)
1. 前言 此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...
- 前端初学者开发学习视频_初学者学习前端开发的实用指南
前端初学者开发学习视频 by Nikita Rudenko 通过尼基塔·鲁登科(Nikita Rudenko) 初学者学习前端开发的实用指南 (A practical guide to learnin ...
- php评星,jQuery+PHP星级评分实现方法
搜索热词 本例实现的效果: 过渡动画显示评分操作. 及时更新平均得分和用户所评的分数. 后台限制用户重复评分操作,并在前端及时显示. XHTML HTML结构分为用于显示灰星星div#big_rate ...
- 吴恩达老师深度学习视频课笔记:总结
吴恩达老师深度学习视频课网址为:https://mooc.study.163.com/smartSpec/detail/1001319001.htm/?utm_source=weibo.com& ...
- 使用 HTML CSS 和 JavaScript 创建星级评分系统
各位读者好,今天在本博客中,您将学习如何使用 HTML CSS 和 JavaScript 创建星级评分系统 (Widget).早些时候,我还分享了一篇关于Star Rating Widget 的博客, ...
- 零基础怎么学习视频剪辑?这篇初剪辑学者指南你一定不要错过
自从抖音.哔哩哔哩等视频平台的爆火,作为一种技能的视频剪辑开始受到了大众的关注,不少人开始跃跃欲试,但视频剪辑该如何入门,又如何通过学习制作出越来越好的视频呢?本次小鱼整理了视频剪辑最基本的知识,并将 ...
最新文章
- tomcat用80port能够启动,可是浏览器不显示tomcat首页
- 【基于libRTMP的流媒体直播之 AAC、H264 推送】
- ubuntu VMware
- c++ 输出二进制_【位运算与状态压缩】二进制的魅力
- 【算法】螺旋方阵 上交OJ1021
- HDMI显示器驱动设计与验证
- 高等数学下-赵立军-北京大学出版社-题解-练习8.3
- LeetCode 2074. 反转偶数长度组的节点(链表)
- HDU_3786 找出直系亲属- softbar
- iframe的2个问题
- nginx日志统计分析的相关常用命
- 在线常用正则表达式可视化生成与测试工具与示例 Regular Expression
- k8s之Deployment滚动更新
- Go Module 私有仓库:fatal: could not read Username for ‘https://xxx.com‘: terminal prompts disabled
- 何小龙——DRM 驱动程序开发(VKMS)部分代码修正
- 使用WP-Salts-Update-CLI自动更新您的WordPress盐
- 如何基于 ZEGO SDK 实现 Android 变声/混响/立体声
- oracle数据库小记
- android studio出现,Android studio 出现缺少sdk的情况,如何解决?
- 计算机科学家 本科专业,纽芬兰纪念大学计算机科学本科专业介绍及课程设置...
热门文章
- 【转】其实Unix很简单
- 合成谬误与公地悲剧(为何设置产品总监职位及核算名义成本)
- 如何使用txt文件实现JMeter参数化
- Spring MVC视图解析器
- php抓取网页css,php 抓取的页面如何处理可以只保留DOM结构,去掉CSS和JS?
- 6 redis 编译失败_Redis(NoSQL数据库)基础篇
- stata 倾向得分匹配(二)偏差校正匹配估计量
- 小程序开发好学吗?需要掌握哪些知识技能?
- 生成图片_GitHub Star 3.2K Java 图片缩略图生成库
- java团队名字_作为一名Java工程师,我在DevOps团队都经历了什么