动态星星评价条(支持半星操作)

我们经常看到淘宝、虾米音乐上的星星评价条,但是一般情况下它们都是只支持整颗星评价,如果要半颗星为单位进行评价是怎么做的呢,下面就来看一下。
首先,附上这段的源码,使用jquery:

<!DOCTYPE html>
<html>
<head>
    <title>星星评价</title>
    <meta charset='UTF-8'>
    <style>
    /*该部分为背景设置*/
        div{
            padding-left: 100px;
            padding-top: 50px;
            background: rgba(208, 118, 118, 0.1);
            width: 300px;
            height: 100px;
        }/*该部分为背景*/
        i{
            display: inline-block;
            width: 8px;
            height: 16px;
            margin: 0px;
            padding: 0px;
            float: left;
        }
        /*这里的background是半颗空的星星*/
        .level_hollow_left{
            background:url("./img/star_hollow_left.png") no-repeat;
        }
        .level_hollow_right{
            background:url("./img/star_hollow_right.png") no-repeat;
        }
        /*这里的background是半颗实的星星*/
        .level_entity_left{
            background:url("./img/star_entity_left.png") no-repeat;
        }
        .level_entity_right{
            background:url("./img/star_entity_right.png") no-repeat;
        }
    </style>
</head>
<body>
    <div>
        <span class="level star">
            <i class="level_hollow_left" cjmark=""></i>
            <i class="level_hollow_right" cjmark=""></i>
            <i class="level_hollow_left" cjmark=""></i>
            <i class="level_hollow_right" cjmark=""></i>
            <i class="level_hollow_left" cjmark=""></i>
            <i class="level_hollow_right" cjmark=""></i>
            <i class="level_hollow_left" cjmark=""></i>
            <i class="level_hollow_right" cjmark=""></i>
            <i class="level_hollow_left" cjmark=""></i>
            <i class="level_hollow_right" cjmark=""></i>
        </span>
    </div>

    <script src="./jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(".star i[cjmark]").on('click',function(){
            var preNum = 0;
            //鼠标点击位置前面的(包括本身)置为实心,
            $(this).prevAll().andSelf().each(function(i){
                if(i%2==0){ //左半部分
                    $(this).attr('class','level_entity_left');
                    preNum++;
                }else{
                    $(this).attr('class','level_entity_right');
                    preNum++;
                }
            }); 
            //后面的置为空心
            $(this).nextAll().each(function(i){
                if((i+preNum)%2==0){ //左半部分
                    $(this).attr('class','level_hollow_left');
                }else{
                    $(this).attr('class','level_hollow_right');
                }
            });
        }); 
    </script>

</body>
</html>

运行结果,星星评价随鼠标点击位置不同变化,可多次点击:
这里写图片描述

这部分代码很简单,相信你一看就会明白…

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值