jquery方法小星星评分

最新推荐文章于 2021-08-04 08:58:09 发布

梅志贤

最新推荐文章于 2021-08-04 08:58:09 发布

阅读量136

点赞数

本文链接：https://blog.csdn.net/weixin_44389021/article/details/87815770

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>星级评分系统</title>
    <style>
        body, div, ul, li, p {
            margin: 0;
            padding: 0;
        }

        body {
            color: #666;
            font: 12px/1.5 Arial;
        }

        ul {
            list-style-type: none;
        }

        #star {
            position: relative;
            width: 600px;
            margin: 10px auto;
        }

        #star ul, #star span {
            float: left;
            display: inline;
            height: 19px;
            line-height: 19px;
        }

        #star ul {
            margin: 0 10px;
        }

        #star li {
            float: left;
            width: 24px;
            cursor: pointer;
            text-indent: -9999px;
            background: url(http://www.fgm.cc/learn/lesson4/img/star.png) no-repeat;
        }

        #star strong {
            color: #f60;
            padding-left: 10px;
        }

        #star li.on {
            background-position: 0 -28px;
        }

        #star p {
            position: absolute;
            top: 20px;
            width: 159px;
            height: 60px;
            display: none;
            background: url(http://www.fgm.cc/learn/lesson4/img/icon.gif) no-repeat;
            padding: 7px 10px 0;
        }

        #star p em {
            color: #f60;
            display: block;
            font-style: normal;
        }
    </style>

</head>
<body>
<div id="star">
    <span>点击星星就能打分</span>
    <ul>
        <li><a href="javascript:;">1</a></li>
        <li><a href="javascript:;">2</a></li>
        <li><a href="javascript:;">3</a></li>
        <li><a href="javascript:;">4</a></li>
        <li><a href="javascript:;">5</a></li>
    </ul>
    <span></span>
    <p></p>
</div>
</body>
</html>
<script src="js/jquery-1.12.4.js"></script>
<script>
    //  .prevAll()   前面所有的兄弟
    //  .nextAll()   后面所有的兄弟
    var aMsg = [
        "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
    ]
    $(function () {
        $("li").mouseenter(function () {
            $(this).css("background-position","0 -28px").prevAll().css("background-position","0 -28px");
            $(this).nextAll().css("background-position","");
            $("p").show().css("left",($(this).index()+1)*25+"px");
            $("p").html("<em><b>" + ($(this).index()+1) + "</b> 分 " + aMsg[$(this).index()].match(/(.+)\|/)[1] + "</em>" + aMsg[$(this).index()].match(/\|(.+)/)[1]);

        })
        $("li").mouseleave(function () {
            $("li").css("background-position","");
            $("p").hide();
            $(".on1").css("background-position","0 -28px").prevAll().css("background-position","0 -28px");
        })
        $("li").click(function () {
            $(this).addClass("on1").siblings().removeClass("on1");
            $("p").hide();
            $("span").eq(1).html("<strong>" + ($(this).index()+1) + " 分</strong> (" + aMsg[$(this).index()].match(/\|(.+)/)[1] + ")")
        })
    })
</script>

梅志贤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery方法小星星评分

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; ..
复制链接

扫一扫