视频显示内容有限，能不能把代码贴出来以方便学习
我自己跟着打的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>星级评分-第五种实现方式</title>
<style type="text/css">
body,ul,li{
padding: 0;
margin: 0;
}
li{
list-style-type: none;
}
.rating{
position: relative;
width:160px;
background: url(img/two.png) repeat-x;
margin: 100px auto;
}
.rating-display{
width: 0;
height: 32px;
background: url(img/two.png) repeat-x 0 -32px;
}
.rating-mask{
position: absolute;
left: 0;
top: 0;
width: 100%;/*跟随父容器*/
}
.rating-item{
float: left;
width: 32px;
height: 32px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="rating" id="rating">
<!-- <div class="rating-display"></div>
<ul class="rating-mask">
<li class="rating-item "></li>
<li class="rating-item"></li>
<li class="rating-item"></li>
<li class="rating-item"></li>
<li class="rating-item"></li>
</ul> -->
</div>
</body>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var rating = (function(){
//策略
var strategies ={
entire:function(){
return 1;
},
half:function(){
return 2;
},
quarter:function(){
return 4;
}
};
//评分
var Rating = function(el,options){
this.$el = $(el);
this.opts = $.extend({},Rating.DEFAULTS,options); //用户如果查了自定义参数options，就会覆盖默认参数，然后传给空对象，返回给opts保存
if(!strategies[this.opts.mode]){//如果设定的mode在strategies上不存在
this.opts.mode = 'entire';
}
this.ratio = strategies[this.opts.mode]();
this.opts.total *=this.ratio;
this.opts.num *=this.ratio;
this.itemWidth = 32/this.ratio;
this.displaWidth = this.opts.num * this.itemWidth;
};
Rating.DEFAULTS = {
mode:'entire',
total:5,
num:2,
readOnly:false,
select:function(){},
chosen:function(){},
};
Rating.prototype.init = function(){
this.buildHTML();//动态创建HTML标签
this.setCSS();
if(!this.opts.readOnly){
this.bindEvent();
}
};
Rating.prototype.buildHTML = function(){//创建HTML
var html = '';
html+='<div class="rating-display"></div><ul class="rating-mask">';
for(var i=0; i<this.opts.total; i++)
{
html+='<li class="rating-item "></li>';
}
html+='</ul>';
this.$el.html(html);
};
Rating.prototype.setCSS = function(){//设置css
this.$el.width(this.opts.total * this.itemWidth);//父容器$el的总宽度通过width来设定
this.$display = this.$el.find('.rating-display') //获取展示层
this.$display.width(this.displaWidth); //设置展示层的宽度
this.$el.find('.rating-item').width(this.itemWidth);
};
Rating.prototype.bindEvent = function(){
var self =this;//保存展示层，在下面一行后，this指的是当前点击的星星，只有在上面才表示rating实例化后的对象
//委托人是.rating-item也就是每一颗星星，事件是mouseover
self.$el.on('mouseover','.rating-item',function(){
var count = $(this).index()+1;//记录当前鼠标滑动到哪一颗星星上，this就是星星
self.$display.width(count * self.itemWidth);//count表示当前是第几颗星星
//判断后再执行self.opts.select,call改变this的指向，指向指向的星星,第二个参数是当前是第几颗星星，然后是总攻有多少星星
(typeof self.opts.select === "function")&&self.opts.select.call(this,count,self.opts.total);
//通过trigger触发select函数，然后传递参数，传递参数必须在数组中
self.$el.trigger('select',[count,self.opts.total]);
}).on('click','.rating-item',function(){
var count = $(this).index()+1;
self.displaWidth = count*self.itemWidth;
(typeof self.opts.chosen === "function")&&self.opts.chosen.call(this,count,self.opts.total);
self.$el.trigger('chosen',[count,self.opts.total]);
}).on('mouseout',function(){
self.$display.width(self.displaWidth);
});
};
Rating.prototype.unbindEvent = function(){//解绑定
//$this.unbind('event name(s)', function name)
this.$el.off();//这个才是正确的，上面是自己乱写的
};
var init = function(el,option){
var $el = $(el),
rating = $el.data('rating');
if(!rating){
$el.data('rating',(rating = new Rating(el,typeof option==="object"&&option)));
rating.init();
}
if(typeof option === 'string') rating[option]();
// this.$el.data('rating',rating);
// new Rating(el,options).init();
};
//JQ插件
$.fn.extend({
rating:function(option){
return this.each(function(){
init(this,option);
});
}
});
return{
init:init
};
})();
$('#rating').rating({
mode:'quarter',
total:7,
num:4,
readOnly:false,
chosen:function(count,total){
$('#rating').rating('unbindEvent');
}
});
// rating.init('#rating',{
// total:10,
// num:3,
// readOnly:true,
// select:function(count,total){
// console.log("select的是"+this);
// console.log(count + '/' + total);
// },
// chosen:function(count,total){
// rating.init("#rating",'unbindEvent');
// },
// });
</script>
</html>