jquery评星

最新推荐文章于 2025-12-25 09:07:35 发布

转载最新推荐文章于 2025-12-25 09:07:35 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dsfderek/archive/2012/05/04/2482799.html

文章标签：

#javascript #xhtml #ViewUI

本文介绍了一款基于jQuery的简单易用的评星插件，通过HTML、CSS和JavaScript的结合，实现了网页上的动态评分功能。用户可以使用鼠标悬停预览星级，并通过点击进行评分，插件会实时显示评分结果。

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>jquery评星</title>
    <style type="text/css">
        .dengji {
            position: relative;
            padding: 0;
            margin: 0;
        }

        .xing {
            overflow: hidden;
            padding: 0;
            margin: 0;
            width: 140px;
            display: inline-block;
            background: url("http://www.hyj.com/theme/hieiika/images/two_stars.gif") repeat-x 0 -32px;
            float: left;
        }

        .xing ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .xing ul li {
            height: 32px;
            width: 28px;
            float: left;
            line-height: 32px;
            overflow: hidden;
            cursor: pointer;
            z-index: 1000;
            display: inline-block;
            position: relative;
            text-indent: -9999px;
        }

        .xing_chen {
            background: url("http://www.hyj.com/theme/hieiika/images/two_stars.gif") repeat-x 0 0;
            height: 32px;
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            cursor: pointer;
        }

        .xing_show {
            float: left;
            line-height: 32px;
            padding-left: 20px;
        }

        .xing_show span {
            color: #f50;
            font-size: 14px;
            font-weight: 700;
            padding: 0 10px;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $li = $(".xing ul li");
            var $xing = $(".xing_chen");
            var $xingNum = $(".xing_show");
            //鼠标滑过事件
            $li.mouseover(function () {
                //设置xing_chen背景样式
                $xing.css("width", $(this).attr("rate") * 28 + "px");
                //设置当前评分数字
                $xingNum.children("span").text($(this).attr("rate") * 20);
            });
            //鼠标离开事件
            $li.mouseleave(function () {
                //如果xing_show的属性rate为空时
                if ($xingNum.attr("rate") == "") {
                    //xing_chen的width样式为0
                    $xing.css("width", "0");
                } else {
                    //否则设置xing_chen的样式width
                    $xing.css("width", $xingNum.attr("rate") * 28 + "px");
                    //设置xing_show的分数值
                    $xingNum.children("span").text($xingNum.attr("rate") * 20);
                }
            });
            //点击事件
            $li.click(function () {
                //设置xing_show的rate属性 及评分数值
                $xingNum.attr("rate", $(this).text());
                $xingNum.children("span").text($xingNum.attr("rate") * 20);
            });
        });
    </script>
</head>
<body>
<div class="dengji">
    <div class="xing">
        <ul>
            <li rate="1">1</li>
            <li rate="2">2</li>
            <li rate="3">3</li>
            <li rate="4">4</li>
            <li rate="5">5</li>
        </ul>
        <div class="xing_chen"></div>
    </div>
    <div class="xing_show" rate="1">当前评分为<span>0</span>分</div>
</div>
</body>
</html>