jquery星级评分css代码
时间: 2024-06-17 19:03:39 浏览: 110
jQuery 星星评分代码
5星 · 资源好评率100%
jQuery星级评分可以通过CSS来实现,以下是一个简单的例子:
HTML代码:
```
<div class="star-rating">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
```
CSS代码:
```
.star-rating {
font-size: 0;
}
.star-rating .star {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 5px;
background: url(star.png) no-repeat left top;
}
.star-rating .star.active {
background-position: left bottom;
}
```
上面的代码中,我们使用了一个`star.png`的图片,它包含了两个状态的星星:未选中和选中。在CSS代码中,我们将每个星星定义为一个`div`元素,并设置它们的宽度、高度、间距和背景图像。同时,我们将父容器的字体大小设置为0,以消除行内元素之间的空白间距。
在用户进行评分时,我们可以使用JavaScript/jQuery来动态地添加或删除`.active`类,从而改变星星的背景位置,实现星级评分的效果。
阅读全文