为什么星星不变化
画一个会跑的字
2019-04-05 11:32
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>星级评分第一种实现方式</title>
<style>
body,ul,li{
padding:0;
margin:0;
}
li{
list-style: none;
}
.rating{
width:175px;
height:35px;
margin:100px auto;
}
.rating-item{
float:left;
width:35px;
height:35px;
background: url(dark.png)no-repeat;
cursor: pointer;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<ul class= "rating" id = "rating">
<li class="rating-item" title="1"></li>
<li class="rating-item" title="2"></li>
<li class="rating-item" title="3"></li>
<li class="rating-item" title="4"></li>
<li class="rating-item" title="5"></li>
</ul>
<script>
var num = 2,
$rating = $('#rating'),
$item = $rating.find('.rating-item');
//点亮
var lightOn = function(num){
$item.each(function(index){
if(index < num){
$(this).css('background-possion','0 -40px');
}else{
$(this).css('background-possion','0 0');
}
});
};
//初始化
lightOn(num);
//事件绑定
$item.on('mouseover',function(){
lightOn($(this).index() + 1);
}).on('click',function(){
num = $(this).index() + 1;
});
$rating.on('mouseout',function(){
lightOn(num);
});
</script>
</body>
</html>
1回答
-
- 林不渡
- 2019-04-05 13:03:55
$(this).css('background-possion','0 -40px'); background-position没拼对
星级评分原理和实现（上）
25809 学习 · 109 问题
相似问题