4.24 星星评价
4.24.1 显示分数效果
采用背景填充+百分比，可现实半颗星。
HTML代码
<div class="clearfix"><span class="f-l f-14 va-m">宝贝描述：</span><div class="star-bar star-bar-show size-M f-l va-m mr-10"><span class="star" style="width:82%"></span></div><strong class="f-l f-14 va-m">4.1</strong></div>
通过.size-M，和.size-S 控制星星的大小。
CSS代码
.star-bar-show{background:url(../images/star/iconpic-star-S-default.png) repeat-x 0 0}.star-bar-show .star{background:url(../images/star/iconpic-star-S.png) repeat-x 0 0}.star-1{width:20%}.star-2{ width:40%}.star-3{width:60%}.star-4{ width:80%}.star-5{ width:100%}.star-bar-show.size-M{width:120px;height:24px}.star-bar-show.size-M,.star-bar-show.size-M .star{background-size:24px}.star-bar-show.size-M .star{ height:24px}.star-bar-show.size-S{width:80px; height:16px}.star-bar-show.size-S,.star-bar-show.size-S .star{background-size:16px}.star-bar-show.size-S .star{ height:16px}
显示不需要脚本。只有在点评的时候需要脚本。
4.24.2 打分效果
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>
通过.size-M，和.size-S 控制星星的大小。
CSS代码
.star-bar{font-size:0; line-height:0}.star-bar .star{display:inline-block;text-align:center}/*中*/.size-M img{ width:24px;height:24px}/*小*/.size-S img{width:16px;height:16px}
JS代码
$(function(){$("#star-1").raty({hints: ['1','2', '3', '4', '5'],//自定义分数starOff: 'iconpic-star-S-default.png',//默认灰色星星starOn: 'iconpic-star-S.png',//黄色星星path: '/static-h-ui-net/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: '//static.h-ui.net/h-ui/images/star',number: 5,showHalf: true,targetKeep : true,click: function (score, evt) {//点击事件//第一种方式：直接取值$("#result-2").html('你的评分是'+score+'分');}})});
