星级评分实现，封装成jquery插件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<title>星级评分</title>
<style type="text/css">
    body ul li{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    .rating{
        width: 130px;
        height: 26px;
        margin: 100px auto;
    }
    .rating-item{
        float: left;
        width: 26px;
        height: 26px;
        cursor: pointer;
        background:url(rating.jpg) no-repeat;
    }
</style>
</head>
<body background="#ccc">
    <ul id="rating" class="rating">
        <li class="rating-item" title="很不好"></li>
        <li class="rating-item" title="不好"></li>
        <li class="rating-item" title="一般"></li>
        <li class="rating-item" title="好"></li>
        <li class="rating-item" title="很好"></li>
    </ul>
    <ul id="rating2" class="rating">
        <li class="rating-item" title="很不好"></li>
        <li class="rating-item" title="不好"></li>
        <li class="rating-item" title="一般"></li>
        <li class="rating-item" title="好"></li>
        <li class="rating-item" title="很好"></li>
    </ul>
<script src="jquery.js"></script>
<script>
    // rating是一个对象
    var rating = (function(){

        // 点亮
        var lightOn = function($item,num){
            $item.each(function(index){
                if(index<num){
                    $(this).css('background-position','0 -26px');
                }else{
                    $(this).css('background-position','0 0');
                }
            });
        }

        var init= function(el,num){
            var $rating = $(el),
            $item=$rating.find('.rating-item');

            // 初始化
            lightOn($item,num);

            // 事件绑定
            $rating.on('mouseover','.rating-item',function(){
                lightOn($item,$(this).index()+1);
            }).on('click','.rating-item',function(){
                num = $(this).index()+1;
            }).on('mouseout',function(){
                lightOn($item,num);
            });

        };

        // Jquery 插件
        $.fn.extend({
            rating:function(num){
                return this.each(function(){
                    init(this,num);
                });
            }
        });

        // 返回一个对象
        return {
            init:init
        };



    })();

    rating.init('#rating',2);
    // rating.init('#rating2',3);
    $("#rating2").rating(4);
</script>
</body>
</html>
效果图如下：
这里写图片描述
rating.jpg图：
这里写图片描述
星级评分实现，封装成jquery插件

猜你喜欢
