开源的插件实现五星评级的各种效果

港控/mmm° 2022-01-07 03:39 117阅读 0赞

## 背景 ##

近期项目需要实现根据数值显示某个客户的星级，实现的方法有很多。可以通过比较笨的方法，显示不同个数的html标签，也可以通过js脚本实现动态显示，也可以通过纯css的方式实现。  
综合比较和很多方法，发现了一个插件不但可以满足我本次的需求，以后有其他星级的需求也可以满足。

## 插件 jQuery Raty ##

下载地址  
[https://github.com/wbotelhos/raty][https_github.com_wbotelhos_raty]

演示地址  
[http://www.jq22.com/yanshi6430][http_www.jq22.com_yanshi6430]  
也可以下载源码后，打开demo会有全部功能展示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]

## 使用案例 ##

需要下载raty.js并从images文件夹获取图片，放到文件夹。jquery用的在线的不用下载。

*  starOn:‘imgs/star-on.png’,
 *  starOff:‘imgs/star-off.png’,
 *  starHalf:‘imgs/star-half.png’,

修改路径，直接copy下面代码就可以运行

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="js/jquery.raty.js"></script>
    
    <div id="star" data-num="2.5"></div>
    <script>
    
    
        $(function(){
            $("#star").raty({
                score:function(){
                    return $(this).attr("data-num");
                },
                starOn:'imgs/star-on.png',
                starOff:'imgs/star-off.png',
                starHalf:'imgs/star-half.png',
                readOnly:false,
                halfShow:true,
                size:34,
    
            })
        });
    
    </script>
    </body>
    </html>

## 说明 ##

score:需要显示的星星个数

starOn：鼠标放上去时显示的图标的位置

starOff：鼠标离开后显示的图标的位置

starHalf：需要显示的半星的标图的位置

readOnly：所显示的星星是否只读，默认非只读

halfShow：半个星星是否可以显示，默认可以

size：div显示的长度，太短了星星会换行

[https_github.com_wbotelhos_raty]: https://github.com/wbotelhos/raty
[http_www.jq22.com_yanshi6430]: http://www.jq22.com/yanshi6430
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]: /images/20211227/ae229b955d83488a975cdb6a1f8f189e.png