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

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

时间: 2024-11-08 03:45:34

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

慕课网 星级评分原理和实现(上)

源码下载 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>星级评分--第一种实现方式</title> <style> body, ul, li { padding: 0; margin: 0; display: block; } li { list-style-type: none; } .r

js实现星级评分效果(最短代码)

1. 前言 此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时为点击,则离开后还是保持之前的状态. 此demo没有文字信息等提示,可以根据需要自行添加使用. 2. 代码 <!DOCTYPE html> <html> <head> <title>Star Rating</title> <script src="http://apps.

15天学习MVC后的小结(分享经历与想法)

学习MVC已经有半个月,看了看日历,刚好半个月.分享了好几篇练习的博文:一,<创建第一个MVC应用程序> http://www.cnblogs.com/insus/p/3358560.html二,<@Styles的nameSpace是什么>http://www.cnblogs.com/insus/p/3358703.html三,<MVC应用程序使用Entity Framework>http://www.cnblogs.com/insus/p/3359111.html四,

js实现星级评分之方法一

利用一个星级评分的小案例,来逐步封装js星级评分插件. 从最基础的js知识,通过一个小的demo,逐步学习js的面向对象知识. 从浅到深,逐步递进. 图片素材 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>星级评分--第一种实现方式</title> </head> <style type="text/css&quo

数组练习:各种数组方法的使用&amp;&amp;事件练习:封装兼容性添加、删除事件的函数&amp;&amp;星级评分系统

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

干货之运用CALayer创建星级评分组件(五角星)

本篇记录星级评分组件的创建过程以及CALayer的运用. 为了实现一个星级评分的组件,使用了CALayer,涉及到mask.CGPathRef.UIBezierPath.动画和一个计算多角星关键节点的算法. CALayer管理基于图像的内容,并让我们可以在内容上添加动画.UIView及其子类拥有一个属性layer,我们可以运用该属性做出非常多的效果.例如圆角.多边形.甚至自定义形状的view,局部遮挡,擦除模糊效果,局部内容依次闪亮效果,弧形进度条等等. 首先查看CALayer的一个属性mask

ExtJS(3)- 自定义组件(星级评分)

今天介绍ExtJS的组件开发,这里以星级评分为示例,首先来看看效果图: 然后是功能操作:鼠标移动到五个星星上面时,会有tooltip显示当前的分值.如图:鼠标悬停在第四颗星星时前四颗星星显示高亮笑脸,当点击下去时锁定笑脸并且设定份数为4. 然后我们来说一下实现原理,Ext的组件基本单元是Ext.Component,所以自定义组件可以继承Component,然后显示部分直接用html来显示,包括css和动态事件都可以直接在html上编辑添加. 接下来我们来看代码: Ext.define('Pact

Java学习视频免费下载

成都传智播客软件开发培训超级福利来袭,凡是浏览官网http://cd.itcast.cn?140714lscs后,在此博客评论区提出意见或是发表对成都传智播客Java.PHP培训看法的,就可获得成都传智播客Java学习视频资料下载地址!小伙伴们想学软件开发就赶紧行动吧,浏览官网后,评论发表对官网的建议或感受便可获得哦!Java学习视频免费下载

js星级评分点击星级评论打分效果--收藏--转载

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-