专注矿山机械设备网络营销

我的个人生活和工作记录博客,欢迎广大同行人多多与我交流,一起做好网络推广事业...

网页设计:表格颜色跟随鼠标移动而改变的效果

接着上篇内容网页设计如何让表格线条更漂亮,今天阿权站长告诉大家如何实现表格颜色跟随鼠标移动而改变的效果,首先网页头部加载如下JS,加载方法: <script src="/js/table.js" type="text/javascript"></script>根据您的情况修改路径:

JS中的内容:
function fenlan(o, a, b, c, d) {
    var t = document.getElementById(o).getElementsByTagName("tr");
    for (var i = 1; i < t.length; i++) {
        t[i].style.backgroundColor = (t[i].sectionRowIndex % 2 == 0) ? a : b;

        t[i].onmouseover = function () {
            if (this.x != "1") {
                this.style.backgroundColor = c;
                this.style.color = "#fff";
            }
        }
        t[i].onmouseout = function () {
            if (this.x != "1") {
                this.style.backgroundColor = (this.sectionRowIndex % 2 == 0) a : b;
                this.style.color = "#000";
            }
        }
    }
}

第二步:在表格后面添加如下代码,紧挨</table>:

<script type='text/javascript' language='javascript'>
fenlan("fenlan", "#e6e6e6", "#fff", "#cc0000", "#f60");</script>

第三步:在开始<table>中添加:id="fenlan"

效果如:http://www.seozz.net/sanhuicheng.html

本文地址:http://www.seozz.net/zzseo/TABLEJS.html

本文标题:网页设计:表格颜色跟随鼠标移动而改变的效果

« 上一篇 下一篇 »

发表留言:取消回复

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

版权所有:郑州阿权站长 备案号:豫ICP备12001452号-4 联系我们 Your WebSite.给我留言 Some Rights Reserved.

免责声明:本站仅做个人博客使用,部分图片和内容源自于互联网,若有侵权或不妥请联系删除! Powered By 郑州阿权站长