jquery星级评定效果(原创)

今天自学jquery,原创实现了一个星级评定的效果,好happy啊!

下面是代码,欢迎拍砖!

<!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>
    <title>星级评定效果</title>
    <script type="text/javascript" src="Scripts/jquery-1.6.2.js"></script>
    <style type="text/css">
        ul
        {
            font-size: 26px;
            color: #808080;
            list-style-type: none;
        }

        li
        {
            display: inline;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var s = false;
            var num = 0;
            $("li").click(function () {
                s = true;
                num = $("li").index(this);
            });
            $("li").mouseover(function () {
                $(this).css("color", "yellow").prevAll().css("color", "yellow");
                $(this).nextAll().css("color", "#808080");
            }).mouseout(function () {
                if (s) {
                    qs = num + 1;
                    $("li:lt(" + qs + ")").css("color", "yellow");
                    $("li:gt(" + num + ")").css("color", "#808080");
                }
                else {
                    $("li").css("color", "#808080");
                }
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>★</li>
        <li>★</li>
        <li>★</li>
        <li>★</li>
        <li>★</li>
        <li>★</li>
        <li>★</li>
        <li>★</li>
    </ul>
</body>
</html>
posted @ 2012-06-26 15:01  ``炯``  阅读(328)  评论(2)  编辑  收藏  举报