星级评分系统



<script>


        $(function () {
            var aA = $("a");
            var timer;
            var iStar = -1;
            var unitil = [{
                score: "1分",
                impress: "很不满意",
                notice: "差得太离谱,与卖家描述的严重不符,非常不满"
            },
            {
                score: "2分",
                impress: "不满意",
                notice: "部分有破损,与卖家描述的不符,不满意"
            },
            {
                score: "3分",
                impress: "一般",
                notice: "质量一般,没有卖家描述的那么好"
            },
            {
                score: "4分",
                impress: "满意",
                notice: "质量不错,与卖家描述的基本一致,还是挺满意的"
            },
            {
                score: "5分",
                impress: "非常满意",
                notice: "质量非常好,与卖家描述的完全一致,非常满意"
            }
            ];


            aA.each(function (i) {
                $(this).mouseover(function () {
                    clearTimeout(timer);
                    point(i);
                    $("#box").show();
                    $("#box").css("left",87+26*i);
                    $("#box span").eq(0).html(unitil[i].score);
                    $("#box span").eq(1).html(unitil[i].impress);
                    $("#box h2").html(unitil[i].notice);
                });
                $(this).click(function () {
                    point(i);
                    iStar = i;
                    $("#box").hide();
                    $("#appraise").show();
                    $("#appraise b").html(unitil[i].score);
                    $("#appraise span").html("("+unitil[i].notice+")");
                });
            });


            aA.mouseout(function () {
                timer = setTimeout(function () {
                    point(iStar);
                    $("#box").hide();
                }, 200);
            });


            function point(num) {
                aA.css("background-position", "");
                for (var j = 0; j <= num; j++) {
                    $(aA[j]).css("background-position", "0");
                };
            };
            
        });

    </script>


<body>
    <div id="warp">
        <p>点击星星就能打分</p>
        <p>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </p>
        <div id="box">
            <em></em>
            <span>1分</span><span>很不满意</span>
            <h2>差得太离谱,与卖家描述的严重不符,非常不满</h2>
        </div>
        <p id="appraise"><b>3分</b><span>(质量一般,没有卖家描述的那么好)</span></p>
    </div>
</body>



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值