jQuery Raty这是一个星级评分插件。可以自定义图标,创建各种评级组合,星星数量,每一颗星星的注释,可以在当一个星星被点击时的加回调函数。
使用到的素材图标素材
使用方法
引入JS
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.raty.js"></script>
html结构,只需要一个div即可
<div id="star" data-num="3.5"></div>
JS部分,初始化插件及设置
$(function(){ $("#star").raty({ score:function(){ return $(this).attr("data-num"); }, starOn:'resources/img/star-on-big.png', starOff:'resources/img/star-off-big.png', starHalf:'resources/img/star-half-big.png', readOnly:false, halfShow:true, size:34, }) });
里面的路径根据自己的实际路径修改
上述JS里面属性的介绍
score:需要显示的星星个数 starOn:鼠标放上去时显示的图标的位置 starOff:鼠标离开后显示的图标的位置 starHalf:需要显示的半星的标图的位置 readOnly:所显示的星星是否只读,默认非只读 halfShow:半个星星是否可以显示,默认可以 size:div显示的长度,太短了星星会换行
经过上述设置具体的效果如下
预览里面提供大家官方的文档介绍,如看不明白可以直接用我上述步骤实现
如需学习,可以下载示例研究
评论前必须登录!
注册