郑州SEO—SEO站长(阿权)

郑州seo-阿权团队网络营销服务中.....承接:网站建设、网站优化、网络推广、营销策划、商务外包等业务,咨询QQ:346363458

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

接着上篇内容网页设计如何让表格线条更漂亮,今天阿权站长告诉大家如何实现表格颜色跟随鼠标移动而改变的效果,首先网页头部加载如下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

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

« 上一篇 下一篇 »

发表留言:取消回复

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

Powered By 阿权站长

Copyright【豫ICP备09037741号-2】联系我们Your WebSite.给我留言 Some Rights Reserved.