当前位置：首页 > 网页特效 > 星级评分

基于SVG的jQuery星级评分插件-jRate

分类：星级评分日期：2024-05-14 点击(4) 评论(0)

简介

##### 基本使用
在页面中引入jQuery和jRate.js文件。

```html
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jRate.js"></script>
```
##### html结构：

```html
<div id="jRate"></div>
```
然后按下面方法调用插件：

```html
$("#jRate").jRate();
```
##### BOWER
```html
bower install jqthumb
```
##### 高级特性
设置评分星星的开始颜色和结束颜色
可以设置你喜欢的评分星星的开始颜色和结束颜色。颜色的取值可以是hex值、rgb值或标准的颜色名字。可以为评分条只提供一种同样的颜色。

```html
$("#jRate").jRate({
  startColor: "cyan",
  endColor: "blue"
});
```
##### 初始值
可以为已评分星星个数提供初始值。
```html

$("#jRate").jRate({
  rating:2
});
```
##### 宽度和高度设置
可以自定义评分星星的宽度和高度。

```html
$("#jRate").jRate({
  width: 70,
  height: 70
});
```
##### 评分图案
可以从可用的选项图型列表中选择评分图案。目前可用的图案有：STAR, RECTANGLE, SQUARE, CIRCLE, RHOMBUS, TRIANGLE。

```html
$("#jRate").jRate({
  shape: 'RHOMBUS'
});
```
##### 可增长的宽度和高度
使用growth字段可以使评分图形由小到大变化。

```html
$("#jRate").jRate({
  widthGrowth: 0.2,
  heightGrowth: 0.2
});
```
##### 计数
评分图形的数量由 count 属性决定。可以自定义它的数量。

```html
$("#jRate").jRate({
  count: 10
});
```
##### 背景颜色
可以使用hex值、rgb值和标准的颜色名字来设置背景颜色。

```html
$("#jRate").jRate({
  backgroundColor: 'black'
});
```
##### 描边颜色
可以设置评分图案的描边颜色。

```html
$("#jRate").jRate({
  strokeColor: 'black'
});
```
##### 间隙
可以设置两个图形之间的间隙。

```html
$("#jRate").jRate({
  shapeGap: '10px'
});
```
##### 透明度
可以设置评分图案的透明度。

```html
$("#jRate").jRate({
  opacity: 0.3
});
```
##### 最大值和最小值
可以设置所需的最大值和最小值。

```html
$("#jRate").jRate({
  min: 10,
  max: 15
});
```
##### 精度
可以设置需要的精度值。

```html
$("#jRate").jRate({
  precision: 0
});
```
##### 方向
可以通过布尔值来设置方向是水平的还是垂直的。也可以设置false来进行两个方向的交换。

```html
$("#jRate").jRate({
  horizontal: false
});
```
##### 反向
可以通过布尔值来设置是否反向显示。

```html
$("#jRate").jRate({
  reverse: true
});
```
##### 只读
可以将评分设置为只读模式。

```html
$("#jRate").jRate({
  readOnly: true
});
```
##### onChange
当评分值改变时的一个回调函数。

```html
$("#jRate").jRate({
  onChange: function(rating) {
    $('#demo-onchange-value').text("Your Rating: "+rating);
  }
});
```
##### onSet
当评分星星被点击或设置是的回调函数。

```html
$("#jRate").jRate({
  onSet: function(rating) {
    $('#demo-onset-value').text("Selected Rating: "+rating);
  }
});
```
更多关于该评分插件的信息请参考：https://github.com/senthilporunan/jRate

web299.com

基于SVG的jQuery星级评分插件-jRate

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果