星星评分效果

最新推荐文章于 2022-05-17 14:56:57 发布

Hx_toy

最新推荐文章于 2022-05-17 14:56:57 发布

阅读量876

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/webToy/article/details/77839919

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

简单的评分效果
这里写图片描述

话不多说了，直接上代码

<style>
    .star_score{
        overflow: hidden;
    }
    .star_score span{
        float: left;        
        width: 20px;
        height: 20px;
        background: url(star-off.png) no-repeat;
        background-size: 100%;
        cursor: pointer;
    }
    .star_score span.active, .star_score span.select{
        background: url(star-on.png) no-repeat;
        background-size: 100%;
    }
</style>

<body>
    <div class="star_score"></div>
</body>

<script>
    // 如果需要给后台返值的话，返回 $(".star_score span.select").size()的值即可。
    $(function(){      
        //生成5个星星
        for(var i=0;i<5;i++){
            var _html = '<span title="'+parseInt(i+1)+'分"></span>';
            $(".star_score").append(_html);
        }
        //鼠标滑过，星星背景图片改成选中图片
        $(".star_score span").hover(function(){
            var index = $(this).index();
            for(var i = 0; i <=index; i++){
              $(".star_score span").eq(i).addClass("active");
            }
        //鼠标移除去掉激活效果
        },function(){
            $(".star_score span").removeClass("active");
        });

        //星星点击，这颗星星之前的所有星星加上选中效果
        $(".star_score span").on("click",function(){
            var x = $(this).index();
            $(".star_score span").removeClass('select');
            for (var i = 0; i <= x; i++) {
                $(".star_score span").eq(i).addClass('select');
            };
        })
    })



</script>