用伪类实现百度的评价星星的功能

最新推荐文章于 2020-03-14 11:59:55 发布

dongqinglove

最新推荐文章于 2020-03-14 11:59:55 发布

阅读量1k

点赞数

分类专栏： html小Demo

本文链接：https://blog.csdn.net/dongqinglove/article/details/9141511

版权

html小Demo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我在项目中曾经被要求做一个评价功能，评价的方式就是用类似百度的评价星星，为了实现这个效果我花了好多时间，现在我把代码贴出来和大家分享

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        #star .item {
            height: 30px;
        }
            #star .item a {
                float: left;
                width: 20px;
                height: 20px;
                background: url(empty.gif) no-repeat;
            }

                #star .item a:hover {
                    background: url(filled.gif) no-repeat;
                }

                #star .item a.hover {
                    background: url(filled.gif) no-repeat;
               }

                #star .item a.on {
                    background: url(filled.gif) no-repeat;
                }
    </style>
    <script src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#star .item").each(function () {
                var _as = $(this).find("a");

                _as.hover(function () {
                    var sval = $(this).attr("sval");
                    _as.slice(0, sval).addClass("hover");
                    //_as.addClass("hover");
                }, function () {
                    var sval = $(this).attr("sval");
                    _as.slice(0, sval).removeClass("hover");
                }).click(function () {
                    var sval = $(this).attr("sval");
                    _as.removeClass("on");
                    _as.slice(0, sval).addClass("on");
                    $("#val").html(sval);
                });
            });
        });
        
    </script>
</head>
<body>
    <div id="val"></div>
    <div id="star">
        <div class="item">
            <a sval="1" href="javascript:void(0);"></a>
            <a sval="2" href="javascript:void(0);"></a>
            <a sval="3" href="javascript:void(0);"></a>
            <a sval="4" href="javascript:void(0);"></a>
        </div>
        <div class="item">
            <a sval="1" href="javascript:void(0);"></a>
            <a sval="2" href="javascript:void(0);"></a>
            <a sval="3" href="javascript:void(0);"></a>
            <a sval="4" href="javascript:void(0);"></a>
        </div>
    </div>
</body>
</html>