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

jQuery评分插件jsRapStar

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

jQuery评分插件jsRapStar

简介

##### 使用方法
在页面中引入jquery和jsRapStar.js、jsRapStar.css文件。

```html
<link href="css/jsRapStar.css" rel="stylesheet"> 
<script type="text/javascript" src="js/jquery.min.js"></script>             
<script type="text/javascript" src="js/jsRapStar.js"></script> 
```                 
#####  HTML
使用一个div作为容器，在div上指定start属性作为初始值。

```html
<div id="example" start="3"></div>
```
#####  初始化插件
在页面DOM元素加载完毕之后，通过下面的方法来初始化该jQuery评分插件。

```html
$('#example').jsRapStar();
```
可以实用unicode字符来自定义星星。

```javascript
$('#example').jsRapStar({
  star:'★'
});
```
可以自定义星星的颜色和高度等属性。

```javascript
$('#example').jsRapStar({
 
  // color
  colorFront: 'yellow',
 
  // background color
  colorBack: 'white',
 
  // size in pixels
  starHeight: 32
   
});  
```                  
可以定义使用小数级评分数。

```javascript
$('#example').jsRapStar({
 
  step: true
   
});   
```              
也可以禁止选择评分。
```javascript

$('#example').jsRapStar({
 
  enabled: false
   
});  
```         
该jQuery评分插件的可用事件有：

```javascript
$('#example').jsRapStar({
 
  onClick:function(score){
    $(this)[0].StarF.css({color:'red'});
    alert(score);
  },
 
  onMousemove:function(score){
    $(this).attr('title','Rating: '+score);
  }
     
});  
```     
 该jQuery评分插件的github地址为：https://github.com/Thibor/jsRapStar

web299.com

jQuery评分插件jsRapStar

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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