五角星评分的原理

我们经常看到这种评分。他是怎么实现的呢？如果是满星星的黄色可能还是两个图标，但是这里有半个黄星星的。

通常这种是一个灰色的中间是透明的，旁边是和背景色一样的填充色的星星repeat-x然后外层给个宽度。使它只显示五个。

然后在他的下面放一个重叠的黄色的背景条。因为这个星星旁边是和背景色一样的填充色。所以你看到的黄色，只有那个星星的内部的轮廓。而不是一个长条的色块。然后根据那个黄色的宽度来实现亮了多少的星星。

这种评分一般是有插件的所以不用我们自己写

推荐一个：    JRating是一款基于JQuery开发的评级插件，官方网址：http://www.myjqueryplugins.com/jRating。

1、文件目录结构

      从官方网站上可以下载其源码，目录结构如下：

      

<div class="exemple1" data="18_3"></div>

      相应的javascript脚本：

       $('.exemple1').jRating({

type:'small',

length : 40,

decimalLength : 1

});

       展示效果如下：

       

JRating参数说明

       bigStarsPath  ---- 大星图片路径；

       smallStarsPath  ----  小星图片路径；

       phpPath  ----  用于进行Ajax处理的PHP页面路径；

       type  ---- 显示类型(大星或者小星)，值为small或者big；

       step  ---- 是否一个星一个星的填充等级，值为true或者false；

       isDisabled  ----  是否可用，值为true或者false；

       length  ----  显示的星星数量，默认值为5；

       rateMax  ----  最大比率，默认值20；

       rateInfosX，rateInfosY  ----  鼠标移动的相对位置。