-
爱学习的小可爱666
2019-12-07
- 求星级评分的图
直接截图就行了
- 1回答·805浏览
-
慕田峪934537
2019-06-18
- 雪碧图 星星
....
- 1回答·1082浏览
-
qq_谁_15
2019-04-23
- 只能定位一次怎么办，并不像老师那样点击第几颗就定位第几颗，感觉代码也没什么问题呀
这代码看着花
- 1回答·1180浏览
-
慕田峪3126352
2019-04-10
- 为什么选择的选框跟星星的位置不对应？
具体一点呀，位置是相对来说的，你的这个找相对的是哪一个？
- 1回答·1102浏览
-
ilovemooc
2019-03-13
- 能不能把代码贴出来，以方便学习？
我自己跟着打的
<!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>
- 1回答·1143浏览
-
小草66
2019-01-22
- 这个rating-mast遮盖层的用处是什么？
rating-mast为的是可以检测到鼠标滑到的是哪个星星，他是最上面的一层
- 1回答·1197浏览
-
ZMXZALXT
2018-08-08
- 写了#rating-1:target那些的css后点击星星下面不会出现点亮的星星
解决了吗
- 2回答·1558浏览
-
我不会
2018-07-24
-
慕前端4090542
2018-06-26
- 这个针对背景的雪碧图定位不是应该 top:16px; 32px 48px....为什么是left 呢；
问的不准确，不过又看了一遍，懂了
- 1回答·1434浏览
-
Demo_达子
2018-06-10
- 什么叫字符串作为方法名
- 已采纳 daiwenzh5 的回答
就是函数名，对象调用函数时可以通过 [] 或 . 加函数名来调用，但是，只有[]能接受参数，且参数是字符串（键值对的左侧）。
- 1回答·1522浏览
-
淡水狗
2018-03-14
- 为什么点击后 鼠标经过不能熄灭了。为什么视频里面出现两次.rating-item:hover{ } ?????
- 已采纳 旅行的癞蛤蟆 的回答
因为第二个rating-hover上面有background-image为none，且权重比较高，所以第二个会加上!important提高权限避免被none掉。所以我觉得是不是第一个hover的background可以去掉。。
- 2回答·1307浏览
-
qq_琉璃雨_0
2018-01-18
- 怎么 我没有再降层次 他也可以往回 [熄灭] 呀？
.rating-item:hover{
background:url(images/rating4/rating.png) repeat-x 0 -30px!important;
left: 0;
z-index: 2;
}
我也是，我觉得是这里 .rating-item:hover移动到了已经把第三可改为z-index:2了，而选中的那颗在z-index:1
- 2回答·1567浏览
-
猪卓杰
2017-10-23
- hhfdsafsdf
目测童鞋抽风了
- 1回答·1342浏览
-
慕婉清0717531
2017-09-11
- 星级评分原理与实现
真的是。。。。不知道怎么说你
- 2回答·1399浏览
-
慕婉清0717531
2017-09-11
- 星级评分原理和实现
- 0回答·1478浏览
-
cherrio
2017-09-08
- ;请问我的为什么划过星星之后点击没反应
左看右看没看出哪里不对，要不试试我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>星级评分之第四种实现方式</title>
<style>
.rating {
position: relative;
width: 300px;
height: 56px;
background: url(img/twoStar.jpg) repeat-x;
margin: 100px auto;
}
.rating:hover .rating-item {
background-image: none;
}
.rating-item {
position: absolute;
top: 0;
z-index: 3;
width: 70px;
height: 56px;
}
.rating-item-1 {
left: 0;
}
.rating-item-2 {
left: 56px;
}
.rating-item-3 {
left: 112px;
}
.rating-item-4 {
left: 168px;
}
.rating-item-5 {
left: 224px;
}
.rating-item:hover {
left: 0;
z-index: 2;
background: url(img/twoStar.jpg) repeat-x 0 -56px !important;
}
.rating input {
opacity: 0;
}
input:checked + .rating-item {
left: 0;
z-index: 1;
background: url(img/twoStar.jpg) repeat-x 0 -56px;
}
input:checked + .rating-item ~ .rating-item {
z-index: 0;
}
.rating-item-1:hover, #rating-1:checked + .rating-item {
width: 56px;
}
.rating-item-2:hover, #rating-2:checked + .rating-item {
width: 112px;
}
.rating-item-3:hover, #rating-3:checked + .rating-item {
width: 170px;
}
.rating-item-4:hover, #rating-4:checked + .rating-item {
width: 235px;
}
.rating-item-5:hover, #rating-5:checked + .rating-item {
width: 300px;
}
.rating-item label {
display: inline-block;
width: 100%;
height: 100%;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<div class="rating">
<input type="radio" name="rating" id="rating-1" value="1" />
<a href="javascript:;" class="rating-item rating-item-1" title="很不好">
<label for="rating-1"></label>
</a>
<input type="radio" name="rating" id="rating-2" value="2" checked="checked" />
<a href="javascript:;" class="rating-item rating-item-2" title="不好">
<label for="rating-2"></label>
</a>
<input type="radio" name="rating" id="rating-3" value="3" />
<a href="javascript:;" class="rating-item rating-item-3" title="一般">
<label for="rating-3"></label>
</a>
<input type="radio" name="rating" id="rating-4" value="4" />
<a href="javascript:;" class="rating-item rating-item-4" title="好">
<label for="rating-4"></label>
</a>
<input type="radio" name="rating" id="rating-5" value="5" />
<a href="javascript:;" class="rating-item rating-item-5" title="很好">
<label for="rating-5"></label>
</a>
</div>
<input type="submit" value="提交" />
</form>
</body>
</html>
- 1回答·1363浏览
-
学一点忘一点
2017-08-02
- 就我一个人看着代码心塞吗？
- 已采纳 css魔力 的回答
设计模式只是根据人们的经验提炼而成，并不一定要刻板地按照那些来写；JS是很灵活的，有些通过类来继承的思路本身在JS就显得水土不服 ，所以说这是个重武器，不必要时也没必要用。老师是已经融会贯通了，他会结合各种模式的优劣，组合出好的代码，这也是一种在自己大脑里提炼的经验。
- 1回答·1557浏览
-
暮女神
2017-07-31
- 为什么有时候会出现点击不灵敏
- 已采纳 ImmortalBird 的回答
同样的问题，chrome下是这样的。不是代码问题。你可以用overflow: hidden，那个就没问题。
- 3回答·1657浏览
-
qq_昨日的誓言_1
2017-07-16
- 星星评价源码可以分享吗？？？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第四种实现方法</title>
<style type="text/css">
.rating{
position: relative;
width: 130px;
height: 26px;
background: url(img/rating.png) repeat-x;
margin:100px auto;
overflow: hidden;
}
.rating:hover.rating-item{
background-image: none;
}
.rating-item:hover{
background: url(img/rating.png) repeat-x 0 -26px !important;
}
.rating-item{
position: absolute;
top: 0;
z-index: 3;
width: 26px;
height: 26px;
}
.rating-item-1{
left: 0;
}
.rating-item-2{
left: 26px;
}
.rating-item-3{
left: 52px;
}
.rating-item-4{
left: 78px;
}
.rating-item-5{
left: 104px;
}
.rating-item:hover{
left: 0;
z-index: 2;
background: url(img/rating.png) repeat-x 0 -26px;
}
.rating input{
position: absolute;
left: 0;
top:-20px;
}
input:checked + .rating-item{
left: 0;
z-index: 1;
background: url(img/rating.png) repeat-x 0 -26px;
}
input:checked + .rating-item ~ .rating-item:hover{
z-index: 0;
}
.rating-item-1:hover,#rating-1:checked+.rating-item{
width: 26px;
}
.rating-item-2:hover,#rating-2:checked+.rating-item{
width: 52px;
}
.rating-item-3:hover,#rating-3:checked+.rating-item{
width: 78px;
}
.rating-item-4:hover,#rating-4:checked+.rating-item{
width: 104px;
}
.rating-item-5:hover,#rating-5:checked+.rating-item{
width: 130px;
}
.rating-item lable{
display: inline-block;
width: 100%;
height: 100%;
cursor: pointer;
}
</style>
</head>
<body>
<from>
<div>
<input type="radio" name="rating" id="rating-1" value="1">
<a href="javascript:;" class="rating-item rating-item-1" title="很不好"><label for="rating-1"></label></a>
<input type="radio" name="rating" id="rating-2" checked="checked" value="2">
<a href="javascript:;" class="rating-item rating-item-2" title="不好"><label for="rating-2"></label></a>
<input type="radio" name="rating" id="rating-3" value="3">
<a href="javascript:;" class="rating-item rating-item-3" title="一般"><label for="rating-3"></label></a>
<input type="radio" name="rating" id="rating-4" value="4">
<a href="javascript:;" class="rating-item rating-item-4" title="好"><label for="rating-4"></label></a>
<input type="radio" name="rating" id="rating-5" value="5">
<a href="javascript:;" class="rating-item rating-item-5" title="很好"><label for="rating-5"></label></a>
</div>
<input type="submit" name="提交"/>
</from>
</body>
</html>
- 1回答·2602浏览
-
qq_海鸥振_0
2017-07-05
- 把图片给我
自己做了一张图片 32x32px的 童鞋们来吧~！
- 2回答·2031浏览
-
慕圣4364967
2017-06-30
- 写 hover 不变色怎么办？
又又又不贴上代码看看
- 2回答·1843浏览
-
慕村1106498
2017-06-23
- 新手求教thinkphp5问题
- 已采纳 慕哥8346575 的回答
不好干
- 3回答·1535浏览
-
慕村1106498
2017-06-23
- 新手求教tp5问题
div{border:1px solid black; background:orange; width:100%;postition:absolute;}- 1回答·1410浏览
-
精慕门1038042
2017-06-21
- css感觉易学难精
嗯嗯，有同噶，UI美工
- 5回答·1803浏览
