jQuery实现五星好评

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .relative {
                position: relative;
            }
            
            .box {
                margin: 0 auto;
                width: 500px;
                height: 200px;
                border: 1px dashed #808080;
                padding: 10px;
            }
            
            .box ul {
                list-style: none;
                display: inline-block;
                padding-left: 0;
                width: 30px;
                text-align: center;
            }
            
            .star li .hid1 {
                position: absolute;
                top: 25px;
                left: 16px;
                width: 21px;
                height: 21px;
                z-index: 10;
                opacity: 0;
            }
            
            .star li .hid2 {
                position: absolute;
                top: 25px;
                left: 50px;
                width: 21px;
                height: 21px;
                z-index: 10;
                opacity: 0;
            }
            
            .star li .hid3 {
                position: absolute;
                top: 25px;
                left: 84px;
                width: 21px;
                height: 21px;
                z-index: 10;
                opacity: 0;
            }
            
            .star li .hid4 {
                position: absolute;
                top: 25px;
                left: 119px;
                width: 21px;
                height: 21px;
                z-index: 10;
                opacity: 0;
            }
            
            .star li .hid5 {
                position: absolute;
                top: 25px;
                left: 152px;
                width: 21px;
                height: 21px;
                z-index: 10;
                opacity: 0;
            }
            
            .content {
                width: 200px;
                height: 30px;
                text-align: center;
            }
            
            .content ul {
                height: 30px;
            }
            
            .content li {
                width: 200px;
                display: inline-block;
                display: none;
            }
        </style>
    </head>

    <body>
        <div class="box relative">
            <div class="star">
                <ul>
                    <li>
                        <img class="show" src="img/123_看图王_01.png" />
                        <img class="hid1" src="img/123_看图王_04.png" />
                    </li>
                </ul>
                <ul>
                    <li>
                        <img class="show" src="img/123_看图王_01.png" />
                        <img class="hid2" src="img/123_看图王_04.png" />
                    </li>
                </ul>
                <ul>
                    <li>
                        <img class="show" src="img/123_看图王_01.png" />
                        <img class="hid3" src="img/123_看图王_04.png" />
                    </li>
                </ul>
                <ul>
                    <li>
                        <img class="show" src="img/123_看图王_01.png" />
                        <img class="hid4" src="img/123_看图王_04.png" />
                    </li>
                </ul>
                <ul>
                    <li>
                        <img class="show" src="img/123_看图王_01.png" />
                        <img class="hid5" src="img/123_看图王_04.png" />
                    </li>
                </ul>
            </div>

            <div class="content">
                <ul>
                    <li>非常差，回去再练练</li>
                    <li>真的是差，都不忍心说你了</li>
                    <li>一般，还说的过去</li>
                    <li>很好</li>
                    <li>完美</li>

                </ul>
            </div>

        </div>

        <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(".box ul").hover(function() { //覆盖时
                //星星
                $(this).prevAll().find("li img").eq(1).stop(true).animate({
                    opacity: "1"
                });
                $(this).prev().find("li img").eq(1).stop(true).animate({
                    opacity: "1"
                });
                $(this).prev().prev().find("li img").eq(1).stop(true).animate({
                    opacity: "1"
                });
                $(this).prev().prev().prev().find("li img").eq(1).stop(true).animate({
                    opacity: "1"
                });

                $(this).find("li img").eq(1).stop(true).animate({
                    opacity: "1"
                })

                //内容
                var i = $(this).index();
                //console.log(i);
                $(".content li").css("display", "none");
                $(".content li").eq(i).css("display", "block");

            }, function() { //离开时
                //星星
                $(this).find("li img").eq(1).stop(true).animate({
                    opacity: "0"
                })
                $(this).prevAll().find("li img").eq(1).stop(true).animate({
                    opacity: "0"
                });
                $(this).prev().find("li img").eq(1).stop(true).animate({
                    opacity: "0"
                });
                $(this).prev().prev().find("li img").eq(1).stop(true).animate({
                    opacity: "0"
                });
                $(this).prev().prev().prev().find("li img").eq(1).stop(true).animate({
                    opacity: "0"
                });

                //内容
                var i = $(this).index();
                $(".content li").eq(i).css("display", "none");

            });
        </script>
    </body>

</html>
jQuery实现五星好评

猜你喜欢
