需要引入的js
<script type="text/javascript" src="<%=basePath%>resources/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>resources/js/jquery.raty.js"></script>
需要的图片
具体使用:
在需要显示星级的地方加一个div
<div id="star" data-num="3.5"></div>
在script中初始化
$(function(){
$("#star").raty({
score:function(){
return $(this).attr("data-num");
},
starOn:'resources/img/star-on-big.png',
starOff:'resources/img/star-off-big.png',
starHalf:'resources/img/star-half-big.png',
readOnly:false,
halfShow:true,
size:34, })
});
score:需要显示的星星个数
starOn:鼠标放上去时显示的图标的位置
starOff:鼠标离开后显示的图标的位置
starHalf:需要显示的半星的标图的位置
readOnly:所显示的星星是否只读,默认非只读
halfShow:半个星星是否可以显示,默认可以
size:div显示的长度,太短了星星会换行
星星显示的效果如下: