问题已经解决，粗心造成的错误
慕用1312185
2018-02-24 19:08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Star rating 1</title>
<style type="text/css">
body,ul,li{
padding: 0;
margin: 0;
}
li{
list-style-type: none;
}
.rating{
width: 165px;
height: 40px;
margin: 100px auto;
overflow: hidden;
}
.rating-item{
float:left;
width: 33px;
height: 33px;
background: url(img/star.png) no-repeat;
cursor:pointer;
}
</style>
</head>
<body>
<!--The First way-->
<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="https://code.jquery.com/jquery-1.11.3.min.js"
integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g="
crossorigin="anonymous"></script>
<script type="text/javascript">
var num = 2,
$item = $('#rating').find('.rating-item');
var lightOn = function(num){
$item.each(function(index){
if(index < num){
$(this).css('background-position', '0 -68px');
}else{
$(this).css('background-position','0 0');
}
});
};
lightOn(num);
$item.on('mouseover',function() {
lightOn($(this).index()+1);
}).on('click', function() {
num=$(this).index()+1;
/* Act on the event */
});
$('#rating').on('mouseout',function() {
lightOn(num);
});
</script>
</body>
</html>
2回答
-
- 龙跃马
- 2019-01-04 22:46:59
这个jq库可以用，下载的没效果
-
- 阿阿影
- 2018-04-16 15:58:47
什么问题？怎么解决的？
星级评分原理和实现（上）
25809 学习 · 109 问题
相似问题