网页中评分效果原理。

哈哈，只是简单的原理（代码可能不是这样写的），明白原理就好～～～～～

    <title></title>
    <style type="text/css">
        td {
            font-size: 5px;
            cursor: default;
        }
    </style>
</head>
<body>

    <table id="Star">
        <tr>
            <td>☆</td>
        </tr>

        <tr>
            <td>☆</td>
        </tr>

        <tr>
            <td>☆</td>
        </tr>

        <tr>
            <td>☆</td>
        </tr>

        <tr>
            <td>☆</td>
        </tr>
    </table>
</body>
</html>
<script type="text/javascript">
    ///未点击之前每个元素都有mouseover,mouseout事件，
    ///点击之后，每个元素都取消mouseover,mouseout事件，
    ///每个元素点击(包含此元素)之前变黑，之后(不包含)变白。
    var len = 0;
    //if (arguments[0].__proto__.constructor.name == 'MouseEvent') {
    //    idEnd = arguments[0].srcElement.id;
    //} if (arguments[0].__proto__.constructor.name == 'HTMLTableCellElement') {
    //    idEnd = arguments[0].id;
    //}
    var BGChangNull = function (low, high) {
        for (var i = low; i <= high; i++) {
            document.getElementById(i).innerHTML = '☆';
        }
    };
    var BGChangeValue = function (low, high) {
        for (var i = low; i <= high; i++) {
            document.getElementById(i).innerHTML = '★';
        }
    };
    var BGChangeAble = function (bool) {
        for (var i = 0; i < len; i++) {
            document.getElementById(i).onmouseover.disabled = bool;
            document.getElementById(i).onmouseout.disabled = bool;
        }
    };
    var BGChangeOver = function () {
        var idEnd = this.id;
        if (!this.onmouseover.disabled) {
            BGChangeValue(0, idEnd);
        }
    };
    var TDChangeOut = function () {
        var idEnd = this.id;
        if (!this.onmouseout.disabled) {
            BGChangNull(0, idEnd);
            ////var idEnd = this.id;
            //BGChangNull(0, this.id);
            ////this.onmouseover.disabled = true;
        }
        //else {
        //    this.onmouseout.disabled = true;
        //}
    };
    var TDOnclick = function () {//点击后改变over事件
        var idEnd = this.id;
        BGChangeValue(0, idEnd);
        BGChangNull(++idEnd, len - 1);
        BGChangeAble(true);
        document.getElementsByTagName('span')[0].innerText = idEnd;
    };
    window.onload = function () {
        var tds = document.getElementById('Star').getElementsByTagName('td');
        len = parseInt(tds.length);
        for (var i = 0; i < len; i++) {
            tds[i].id = i;
            tds[i].onmouseover = BGChangeOver;
            tds[i].onmouseout = TDChangeOut;
            tds[i].onclick = TDOnclick;
        }
        var sp = document.createElement('span');
        document.body.appendChild(sp);
    };
</script>

百度浏览器效果图：

JQuery代码：

<style type="text/css">
        a {
            font-size: 25px;
            color: blue;
            cursor: default;
        }
    </style>
    <script src="JS/jquery-1.7.1.js"></script>
    <script type="text/javascript">

        $(function () {
            var bo = true;
            $('a').mouseover(function () {
                if (bo)
                    $(this).text("★").prevAll().text("★").end().nextAll('a').text("☆");
            }).mouseout(function () {
                if (bo)
                    $('a').text("☆");
            }).click(function () {
                $('span').text($(this).prevAll().length + 1);
                bo = !bo;
                if (bo) {
                    $(this).mouseover();
                    bo = !bo;
                }
            });
        });
    </script>
</head>
<body>
    <div>
        <a>☆</a><a>☆</a><a>☆</a><a>☆</a><a>☆</a><a>☆</a>
        <span></span>
    </div>
</body>

jquery-1.7.1.js文件官网：http://jquery.com/download/

posted @ 2014-02-15 02:01 wjshan0808 阅读(291) 评论(0) 收藏举报

刷新页面返回顶部