本文主要是介绍jquery raty 实现星星打分效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果图：
js以及图片地址 自行引入：http://download.csdn.net/download/lililidahaoren/10178257#
核心代码：
html：
<div class="clearfix" >
<span class="f-l f-15 va-m">速度星级：</span>
<div id="star-1" class="star-bar size-M f-l mr-10 va-m"></div>
<strong id="result-1" class="f-l va-m"></strong>
</div>
<div class="clearfix" >
<span class="f-l f-15 va-m">质量星级：</span>
<div id="star-2" class="star-bar size-M f-l mr-10 va-m"></div>
<strong id="result-2" class="f-l va-m"></strong>
</div>
<div class="clearfix">
<span class="f-l f-15 va-m">态度星级：</span>
<div id="star-3" class="star-bar size-M f-l mr-10 va-m"></div>
<strong id="result-3" class="f-l va-m"></strong>
</div>
js:
$(function(){
$("#star-1").raty({
hints: ['1','2', '3', '4', '5'],//自定义分数
starOff: 'iconpic-star-S-default.png',//默认灰色星星
starOn: 'iconpic-star-S.png',//黄色星星
path: '${pageContext.request.contextPath}/static/h-ui/images/star',//可以是相对路径
number: 5,//星星数量，要和hints数组对应
showHalf: true,
targetKeep : true,
click: function (score, evt) {//点击事件
//第一种方式：直接取值
$("#result-1").html('你的评分是'+score+'分');
}
});
$("#star-2").raty({
hints: ['1','2', '3', '4', '5'],//自定义分数
starOff: 'iconpic-star-S-default.png',//默认灰色星星
starOn: 'iconpic-star-S.png',//黄色星星
path: '${pageContext.request.contextPath}/static/h-ui/images/star',//可以是相对路径
number: 5,//星星数量，要和hints数组对应
showHalf: true,
targetKeep : true,
click: function (score, evt) {//点击事件
//第一种方式：直接取值
$("#result-2").html('你的评分是'+score+'分');
}
});
$("#star-3").raty({
hints: ['1','2', '3', '4', '5'],//自定义分数
starOff: 'iconpic-star-S-default.png',//默认灰色星星
starOn: 'iconpic-star-S.png',//黄色星星
path: '${pageContext.request.contextPath}/static/h-ui/images/star',//可以是相对路径
number: 5,//星星数量，要和hints数组对应
showHalf: true,
targetKeep : true,
click: function (score, evt) {//点击事件
//第一种方式：直接取值
$("#result-3").html('你的评分是'+score+'分');
}
});
});
获取评分：$("#star-1").raty('score')
这篇关于jquery raty 实现星星打分效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
