jquery评星

最新推荐文章于 2024-08-19 15:52:57 发布

angsequ1746

最新推荐文章于 2024-08-19 15:52:57 发布

阅读量90

点赞数

文章标签： javascript xhtml ViewUI

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

版权

<!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>

转载于:https://www.cnblogs.com/dsfderek/archive/2012/05/04/2482799.html

angsequ1746

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery评星

<!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=...
复制链接

扫一扫