代码改变世界

模拟CSDN下载页面评分图标

2011-03-19 23:47  随风浪迹天涯  阅读(463)  评论(0)  编辑  收藏  举报

不好意思 上次没有把图给截上来，自己么注意。

先看CSDN的效果图吧！就是当有人在下载评分的时候，当他把鼠标放在五角星的时候，这个五角星以及它前面的五角星全部变成淡黄色这种颜色，而后面的颜色不便。

我们所要实现的效果就如此。

然后 这是现在做的图的效果。本质上的差不多 都是基于同一样的原理。

代码如下：

<!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">
        function indexOf(arr, element) {//返回第几个五角星被鼠标选中
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == element) {
                    return i;
                }
            }
            return -1;
        }

        function inieEvent() {
            var TableRaking = document.getElementById("TableRaking");//获取表格
            var tds = TableRaking.getElementsByTagName("td");//获取表格下的所有td
            for (var i = 0; i < tds.length; i++) {//遍历所有单元格
                var td = tds[i];
                td.style.cursor = "pointer";//设置鼠标形状 
                td.onmouseover = eventClick;//触发onmouseover函数
            }
        }

        function eventClick() {
            var TableRaking = document.getElementById("TableRaking");
            var tds = TableRaking.getElementsByTagName("td");
            var tdNum = indexOf(tds, this);
            for (var i = 0; i <= tdNum; i++) {
                var td = tds[i];
                td.style.background = "red";//设置选中的背景色为红色
            }
            for (var i = tdNum + 1; i <= tds.length; i++) {//把选中以后的背景设置为白色
                var td = tds[i];
                td.style.background = "white";
            }
        }
    </script>

</head>
<body onload="inieEvent()">
    <table id="TableRaking">
        <tr>
            <td> ★</td><td>★</td><td>★</td><td>★</td><td>★</td>
        </tr>
    </table>
</body>
</html>