效果图：
图片：
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>星级评分</title>
<style>
*{
padding:0;
margin: 0;
}
.rating{
width:140px;
height: 26px;
margin:100px auto;
}
.rating-item{
float:left;
width:28px;
height: 26px;
background:url(img/star.png) no-repeat ;
cursor:pointer;
list-style: none;
}
</style>
</head>
<body>
<ul class="rating" id="rating">
<li class="rating-item" title="很不好"></li>
<li class="rating-item" title="不好"></li>
<li class="rating-item" title="一般"></li>
<li class="rating-item" title="好"></li>
<li class="rating-item" title="很好"></li>
</ul>
<script src="js/jquery.min.js" ></script>
<script>
let num=0;
let $rating=$(‘#rating‘);
let $item=$rating.find(‘.rating-item‘);
let lightOn=function(num){
$item.each(function(index){
if(index<num){
$(this).css(‘background-position‘,‘0 -26px‘);
}
else{
$(this).css(‘background-position‘,‘0 0‘);
}
})
}
//初始化
lightOn(num);
//事件绑定
$rating.on(‘mouseover‘,‘.rating-item‘,function(){ //事件委托
lightOn($(this).index()+1);
}).on(‘click‘,‘.rating-item‘,function(){
num=$(this).index()+1;
let info=$(this).attr("title");
console.log(`您选择了“${info}”`);
}).on(‘mouseout‘,function(){
lightOn(num);
})
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/liangtao999/p/11832435.html
时间： 2024-11-01 11:25:03