jQuery简单星级评分插件

2020-01-16 11:31:47 其它

一款很实用的jQuery星级评分插件,可以自定义每个五角星代表的分值,鼠标滑过五角星时即可计算当前的分值。
可以自定义分制,另一种是100分制,你可以滑动鼠标进行评分,这款jQuery评分插件非常简单而且实用。

使用方法
头部引入js

<script src="js/jquery.min.js"></script>
<script src="js/jquery.raty.js" type="text/javascript"></script>

调用HTML

<div id="star"></div>
<div id="result"></div>

调用js

var star= '#star';
var result= '#result';
var m = 10;// 倍数
$(star).hide();//将结果DIV隐藏

$(result).raty({
  hints: ['10','20', '30', '40', '50','60', '70', '80', '90', '100'],
  path: "img/",
  starOff: 'star-off-big.png',
  starOn: 'star-on-big.png',
  size: 24,
  start: 40,
  showHalf: true,
  target: result,
  targetKeep : true,//targetKeep 属性设置为true,用户的选择值才会被保持在目标DIV中,否则只是鼠标悬停时有值,而鼠标离开后这个值就会消失
  click: function (score, evt) {
    alert('你的评分是'+score*m+'分');
  }
});

评论