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

jQuery星级评分插件RatingStars

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

简介

##### 使用方法
在页面中引入jQuery和jquery.rating-stars.js、font-awsome.css文件。

```html
<link rel="stylesheet" href="css/font-awsome.min.css">
<script type="text/javascript" src="jquery.min.js"></script>                    
<script type="text/javascript" src="rating-stars.js"></script>
```                    
#####  HTML结构
通过font-awsome字体图标来构建星星，基本的HTML结构如下：

```html
<div class="rating-stars block" id="another-rating">
    <input type="hidden" class="rating-value" name="stars-value" id="stars-value" value="2">
    
    <div class="rating-stars-container">
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
    </div>
</div>
```
#####  初始化插件
在页面DOM元素加载完毕之后，通过ratingStars()方法来初始化该jquery星级评分插件。

```html
$(".rating-stars").ratingStars();
```
#####  事件
1、选择星星的事件。

```html
$(".rating-stars").ratingStars(ratingOptions);
 
$(".rating-stars").on("ratingChanged", function (ev, data) {
    // dome something
});
```
返回的data对象结构如下：

```html
{
    ratingValue: 4
}
```
2、鼠标hover星星事件。

```html
$(".rating-stars").ratingStars(ratingOptions);
 
$(".rating-stars").on("ratingOnEnter", function (ev, data) {
    // dome something
});
```
返回的data对象结构如下：

```html
{
    ratingValue: 4
}
```
3、鼠标离开星星时触发的事件。

```html
$(".rating-stars").ratingStars(ratingOptions);
 
$(".rating-stars").on("ratingOnLeave", function (ev, data) {
    // dome something
});
```
返回的data对象结构如下：

```html
{
    ratingValue: 4
}
```
 该jQuery星级评分插件的github地址为：https://github.com/lk-code/jquery-rating-stars

web299.com

jQuery星级评分插件RatingStars

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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