需要引入的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中初始化
1 $(function(){ 2 $("#star").raty({ 3 score:function(){ 4 return $(this).attr("data-num"); 5 }, 6 starOn:'resources/img/star-on-big.png', 7 starOff:'resources/img/star-off-big.png', 8 starHalf:'resources/img/star-half-big.png', 9 readOnly:false, 10 halfShow:true, 11 size:34, 12 13 }) 14 }); 15
score:需要显示的星星个数
starOn:鼠标放上去时显示的图标的位置
starOff:鼠标离开后显示的图标的位置
starHalf:需要显示的半星的标图的位置
readOnly:所显示的星星是否只读,默认非只读
halfShow:半个星星是否可以显示,默认可以
size:div显示的长度,太短了星星会换行
星星显示的效果如下: