前端那些事之jquery-实现多行五星评价

最新推荐文章于 2023-04-22 15:17:03 发布

weixin_34186931

最新推荐文章于 2023-04-22 15:17:03 发布

阅读量196

点赞数

文章标签： javascript 前端 python ViewUI

原文链接：https://my.oschina.net/yongxinke/blog/841653

版权

2019独角兽企业重金招聘Python工程师标准>>>

#jquery实现多行五星的评价

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/star.css">
    <style>
        
        /*移动端公共样式*/
        html {
            /*在根元素下面设置大小*/
            font-size: 625%;
        }

        body {
            font-size: .14rem;
            background-color: #fff;
        }

        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea,
        p, blockquote, th, td {
            margin: 0;
            padding: 0;
            -webkit-font-smoothing: antialiased;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        fieldset, img {
            border: 0;
        }

        address, caption, cite, code, dfn, em, strong, th, var {
            font-style: normal;
            font-weight: normal;
        }

        ol, ul {
            list-style: none;
        }

        caption, th {
            text-align: left;
        }

        h1, h2, h3, h4, h5, h6 {
            font-size: 100%;
            font-weight: normal;
        }

        q:before, q:after {
            content: '';
        }

        abbr, acronym {
            boreder: 0;
        }

        body, input, select, button, textarea, a {
            font-family: "Microsoft YaiHei,sans-serif,Tahoma,Geneva";
        }

        a {
            text-decoration: none;
            color: #333;
        }

        .clearfix:after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .ellipsis {
            display: inline-block;
            white-space: nowrap;
            word-wrap: normal;
            width: 100%;
            overflow: hidden;
            -ms-text-overflow: ellipsis;
            text-overflow: ellipsis;
        }

        .cc {
            width: 96%;
            margin: 0 auto;
        }
        /*公共部分结束*/
        .img {

            height: 13.34rem;
            background: url("./images/02_01.png") no-repeat center;
        }

        .logo {
            height: 7.6rem;
            background: url("./images/logo.png") no-repeat center;
            position: relative;
            top: -3.35rem;
            left: 0;
        }

        .star {
            position: absolute;
            top: 3.2rem;
            left: 7.0rem;
        }

        .star li {
            height: 1rem;
            padding-left: .2rem;
        }


        .star li img {
            margin-left: .1rem;
        }
        .star li .message{
            position: absolute;
            top: 0;
            left: 4.8rem;
            width:2rem;
            height: .5rem;
            text-left: center;
            line-height: .5rem;
            color:#FD482C;
            font-size:.20rem;
        }
        .star li img.active {
            background: url("./images/star_on.png")
        }
        .star li img.noactive {
            background: url("./images/star_off.png")
        }
    </style>
</head>
<body>
<div class="cc img">
    <div class="cc logo"></div>
    <ul class="star">
        <li>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
        </li>
        <li>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>

        </li>
        <li>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>

        </li>
        <li>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>

        </li>
        <li>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
        </li>
        <li>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
        </li>
        <li>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
            <a href="javascript:;"><img src="images/star_off.png" alt=""/></a>
        </li>
    </ul>
</div>
<script src="js/jquery-3.0.0.min.js"></script>
<script>
    $(function () {
        var $li = $(".star").find("li");
        $.each($li, function (index, item) {
            var $item = $(item);
            var $imgs = $item.find("a").find("img");
            $.each($imgs, function (i, obj) {
                var $obj = $(obj);
                $obj.hover(function () {
                    $obj.toggleClass("active").siblings("img").removeClass("active")
                })
                $obj.on("click", function () {
                    $(this).toggleClass("active").siblings("img").removeClass("active");
                })
            })
        })
    });

</script>
</body>
</html>

转载于:https://my.oschina.net/yongxinke/blog/841653