課程
/前端開發(fā)
/HTML/CSS
/星級(jí)評(píng)分原理和實(shí)現(xiàn)（下）
視頻顯示內(nèi)容有限，能不能把代碼貼出來以方便學(xué)習(xí)
2019-03-13
源自：星級(jí)評(píng)分原理和實(shí)現(xiàn)（下） 3-6
正在回答
我自己跟著打的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>星級(jí)評(píng)分-第五種實(shí)現(xiàn)方式</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;
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>
? </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;
};
//評(píng)分
var Rating = function(el,options){
this.$el = $(el);
this.opts = $.extend({},Rating.DEFAULTS,options); //用戶如果查了自定義參數(shù)options，就會(huì)覆蓋默認(rèn)參數(shù)，然后傳給空對(duì)象，返回給opts保存
if(!strategies[this.opts.mode]){//如果設(shè)定的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();//動(dòng)態(tài)創(chuàng)建HTML標(biāo)簽
this.setCSS();
if(!this.opts.readOnly){
this.bindEvent();
Rating.prototype.buildHTML = function(){//創(chuàng)建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(){//設(shè)置css
this.$el.width(this.opts.total * this.itemWidth);//父容器$el的總寬度通過width來設(shè)定
this.$display = this.$el.find('.rating-display') //獲取展示層
this.$display.width(this.displaWidth); //設(shè)置展示層的寬度
this.$el.find('.rating-item').width(this.itemWidth);
Rating.prototype.bindEvent = function(){
var self =this;//保存展示層，在下面一行后，this指的是當(dāng)前點(diǎn)擊的星星，只有在上面才表示rating實(shí)例化后的對(duì)象
//委托人是.rating-item也就是每一顆星星，事件是mouseover
self.$el.on('mouseover','.rating-item',function(){
var count = $(this).index()+1;//記錄當(dāng)前鼠標(biāo)滑動(dòng)到哪一顆星星上，this就是星星
self.$display.width(count * self.itemWidth);//count表示當(dāng)前是第幾顆星星
//判斷后再執(zhí)行self.opts.select,call改變this的指向，指向指向的星星,第二個(gè)參數(shù)是當(dāng)前是第幾顆星星，然后是總攻有多少星星
(typeof self.opts.select === "function")&&self.opts.select.call(this,count,self.opts.total);
//通過trigger觸發(fā)select函數(shù)，然后傳遞參數(shù)，傳遞參數(shù)必須在數(shù)組中
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();//這個(gè)才是正確的，上面是自己亂寫的
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,
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>
舉報(bào)
本課程主要講解如何使用不同的方式來實(shí)現(xiàn)星級(jí)評(píng)分的效果。
2 回答源代碼源代碼
1 回答只能定位一次怎么辦，并不像老師那樣點(diǎn)擊第幾顆就定位第幾顆，感覺代碼也沒什么問題呀
2 回答為什么點(diǎn)擊后 鼠標(biāo)經(jīng)過不能熄滅了。為什么視頻里面出現(xiàn)兩次.rating-item:hover{ } ?????
2 回答把圖片給我
1 回答星星評(píng)價(jià)源碼可以分享嗎？？？
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2019-04-11
我自己跟著打的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>星級(jí)評(píng)分-第五種實(shí)現(xiàn)方式</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;
}
};
//評(píng)分
var Rating = function(el,options){
this.$el = $(el);
this.opts = $.extend({},Rating.DEFAULTS,options); //用戶如果查了自定義參數(shù)options，就會(huì)覆蓋默認(rèn)參數(shù)，然后傳給空對(duì)象，返回給opts保存
if(!strategies[this.opts.mode]){//如果設(shè)定的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();//動(dòng)態(tài)創(chuàng)建HTML標(biāo)簽
this.setCSS();
if(!this.opts.readOnly){
this.bindEvent();
}
};
Rating.prototype.buildHTML = function(){//創(chuàng)建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(){//設(shè)置css
this.$el.width(this.opts.total * this.itemWidth);//父容器$el的總寬度通過width來設(shè)定
this.$display = this.$el.find('.rating-display') //獲取展示層
this.$display.width(this.displaWidth); //設(shè)置展示層的寬度
this.$el.find('.rating-item').width(this.itemWidth);
};
Rating.prototype.bindEvent = function(){
var self =this;//保存展示層，在下面一行后，this指的是當(dāng)前點(diǎn)擊的星星，只有在上面才表示rating實(shí)例化后的對(duì)象
//委托人是.rating-item也就是每一顆星星，事件是mouseover
self.$el.on('mouseover','.rating-item',function(){
var count = $(this).index()+1;//記錄當(dāng)前鼠標(biāo)滑動(dòng)到哪一顆星星上，this就是星星
self.$display.width(count * self.itemWidth);//count表示當(dāng)前是第幾顆星星
//判斷后再執(zhí)行self.opts.select,call改變this的指向，指向指向的星星,第二個(gè)參數(shù)是當(dāng)前是第幾顆星星，然后是總攻有多少星星
(typeof self.opts.select === "function")&&self.opts.select.call(this,count,self.opts.total);
//通過trigger觸發(fā)select函數(shù)，然后傳遞參數(shù)，傳遞參數(shù)必須在數(shù)組中
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();//這個(gè)才是正確的，上面是自己亂寫的
};
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>