150分在线求！！不够加分！！懂CSS 和页面的来！！ 帮小弟！

请大家先把此代码COPY下来，粘贴到记事本然后以HTML方式运行看下，然后来解答我问题
现在运行效果是<a>标签鼠标经过颜色渐变
我想
改成 <table>里面<tr>标签鼠标经过颜色渐变功能（一定要看清楚需求哦）
改好了直接给分 不墨迹！！  墨迹的不要来！！
希望兄弟们帮忙，代码如下：<head>
<title> 小黑java=黑狗</title>
<script type="text/javascript" language="JavaScript1.2">
 function lite(obj) { 
    if(document.all&&!window.opera) { 
    obj.filters.blendTrans.apply(); 
    obj.filters.blendTrans.play(); 
    }
}
</script>
<style type="text/css">
<!--
body { 
    font-size:10pt;
    color:black;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background-color:white;
}
.menuHeader { 
    border:1px #990000 solid;
    font-weight:bold;
    background-color:#cc6666;
    color:white;
    padding-left:5px;
    width:130px; /* 135-5*/
    margin-bottom:2px;
    }a.menu { /* properties that are the same for all types */
    display:block;
    padding:1px;
    color:#000066;
    background-color:white;
    text-decoration:none;
    font-weight:bold;
    width:133px; /* 135-1-1 */
    border:1px #990000 solid;
    margin:3px 0px 0px 0px;
    }a.menu:link { 
    margin:3px 0px 0px 0px;
    color:#000066; 
    }
a.menu:visited { 
    color:#660099; 
    }
a.menu:hover { 
    color:white;
    background-color:#cc6666;
    }
a.menu:active { 
    color:#CC0000; 
    }--></style></head><body><a href="#" class="menu" onMouseOver="lite(this)" onMouseOut="lite(this)" style="filter:blendTrans(duration=0.5);">小黑java=黑狗</a><a href="#" class="menu" onMouseOver="lite(this)" onMouseOut="lite(this)" style="filter:blendTrans(duration=0.5);">小黑java=黑狗 </a> <a href="#" class="menu" onMouseOver="lite(this)" onMouseOut="lite(this)" style="filter:blendTrans(duration=0.5);">小黑java=黑狗 </a> <a href="#" class="menu" onMouseOver="lite(this)" onMouseOut="lite(this)" style="filter:blendTrans(duration=0.5);">小黑java=黑狗 </a><a href="#" class="menu" onMouseOver="lite(this)" onMouseOut="lite(this)" style="filter:blendTrans(duration=0.5);">小黑java=黑狗 </a> <a href="#" class="menu" onMouseOver="lite(this)" onMouseOut="lite(this)" style="filter:blendTrans(duration=0.5);">小黑java=黑狗</a> <a href="#" class="menu" onMouseOver="lite(this)" onMouseOut="lite(this)" style="filter:blendTrans(duration=0.5);">小黑java=黑狗</a> <a href="#" class="menu" onMouseOver="lite(this)" onMouseOut="lite(this)" style="filter:blendTrans(duration=0.5);">小黑java=黑狗 </a><a href="#" class="menu" onMouseOver="lite(this)" onMouseOut="lite(this)" style="filter:blendTrans(duration=0.5);">小黑java=黑狗 </a>
</table></body>

解决方案 »

  1.   

    这样可以不？<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Javascript 颜色渐变效果</title>
    <script type="text/javascript">
    var $ = function (id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    };var Class = {
      create: function() {
        return function() {
          this.initialize.apply(this, arguments);
        }
      }
    }Object.extend = function(destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
        return destination;
    }function addEventHandler(oTarget, sEventType, fnHandler) {
        if (oTarget.addEventListener) {
            oTarget.addEventListener(sEventType, fnHandler, false);
        } else if (oTarget.attachEvent) {
            oTarget.attachEvent("on" + sEventType, fnHandler);
        } else {
            oTarget["on" + sEventType] = fnHandler;
        }
    };var ColorFade = Class.create();
    ColorFade.prototype = {
      initialize: function(Obj, options) {
        this._obj = $(Obj);
        this._timer = null;
        
        this.SetOptions(options);
        this.Step = Math.abs(this.options.Step);
        this.Speed = Math.abs(this.options.Speed);
        this.StartColor = this._color = this.GetColors(this.options.StartColor);
        this.EndColor = this.GetColors(this.options.EndColor);
        this._arrStep = [this.GetStep(this.StartColor[0], this.EndColor[0]), this.GetStep(this.StartColor[1], this.EndColor[1]), this.GetStep(this.StartColor[2], this.EndColor[2])];
        this._set = !this.options.Background ? function(color){ this._obj.style.color = color; } : function(color){ this._obj.style.backgroundColor = color; };
        
        this._set(this.options.StartColor);
        
        var oThis = this;
        addEventHandler(this._obj, "mouseover", function(){ oThis.Fade(oThis.EndColor); });
        addEventHandler(this._obj, "mouseout", function(){ oThis.Fade(oThis.StartColor); });
      },
      //设置默认属性
      SetOptions: function(options) {
        this.options = {//默认值
          StartColor:    "#000",//定义原来的颜色
          EndColor:        "#DDC",//定义要渐变的颜色
          Background:    false,//是否背景变色(默认文字)
          Step:            20,//渐变级数
          Speed:        10//渐变速度
        };
        Object.extend(this.options, options || {});
      },
      //获取颜色数据    
      GetColors: function(sColor) {
        sColor = sColor.replace("#", "");
        var r, g, b;
        if (sColor.length > 3) {
            r = Mid(sColor, 0, 2); g = Mid(sColor, 2, 2); b = Mid(sColor, 4, 2);
        } else {
            r = Mid(sColor, 0, 1); g = Mid(sColor, 1, 1); b = Mid(sColor, 2, 1); r += r; g += g; b += b;
        }
        return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];
      },
      //获取渐变颜色数据
      GetColor: function(c, ec, iStep) {
        if (c == ec) { return c; }
        if (c < ec) { c += iStep; return (c > ec ? ec : c); }
        else { c -= iStep; return (c < ec ? ec : c); }
      },
      //获取渐变级数
      GetStep: function(start, end) {
        var iStep = Math.abs((end - start) / this.Step);
        if(iStep > 0 && iStep < 1) iStep = 1;
        return parseInt(iStep);
      },
      //颜色渐变
      Fade: function(rColor) {
        clearTimeout(this._timer);
        
        var er = rColor[0], eg = rColor[1], eb = rColor[2], r = this.GetColor(this._color[0], er, this._arrStep[0]), g = this.GetColor(this._color[1], eg, this._arrStep[1]), b = this.GetColor(this._color[2], eb, this._arrStep[2]);
        
        this._set("#" + Hex(r) + Hex(g) + Hex(b));
        this._color = [r, g, b];
        
        if(r != er || g != eg || b != eb){ var oThis = this; this._timer = setTimeout(function(){ oThis.Fade(rColor); }, this.Speed); }
      }
    };//返回16进制数
    function Hex(i) {
        if (i < 0) return "00";
        else if (i > 255) return "ff";
        else { var str = "0" + i.toString(16); return str.substring(str.length - 2); }
    }//仿asp的mid 截字
    function Mid(string, start, length) {
        if (length) return string.substring(start, start + length);
        else return string.substring(start);
    }
    </script>
    </head><body><div id="idDiv" style="padding:10px;">颜色渐变效果</div><style type="text/css">
    #otbl{ clear:both; height:35px; background:#DBDBDB; width:560px;}</style><TABLE id="otbl">
    <TR>
    <TD>dddddd</TD>
    <TD>fffff</TD>
    <TD>fffff</TD>
    <TD>fffff</TD>
    </TR>
    <TR>
    <TD>dddddd</TD>
    <TD>fffff</TD>
    <TD>fffff</TD>
    <TD>fffff</TD>
    </TR>
    <TR>
    <TD>dddddd</TD>
    <TD>fffff</TD>
    <TD>fffff</TD>
    <TD>fffff</TD>
    </TR>
    <TR>
    <TD>dddddd</TD>
    <TD>fffff</TD>
    <TD>fffff</TD>
    <TD>fffff</TD>
    </TR>
    </TABLE><script>
    new ColorFade("idDiv", { StartColor: "#000", EndColor: "#fff" });
    new ColorFade("idDiv", { StartColor: "#fff", EndColor: "#000", Background: true });var objs = document.getElementById("otbl").rows;
    for(var i = 0, len = objs.length; i < len; i++){
        new ColorFade(objs[i], { StartColor: "#333", EndColor: "#fff", Speed: 20 });
        new ColorFade(objs[i], { StartColor: "#f6f6f6", EndColor: "#3ea936", Background: true, Speed: 20 });
    }
    </script>
    </body>
    </html>
      

  2.   

    也许是我没理解好  楼主不是要求用table吗？
      

  3.   

    s_liangchao1s 是javascript的高手呢, 来学习下
      

  4.   

    是用table但是要像我这样颜色渐变   一定要渐变！ 呵呵 谢谢
      

  5.   

    <head>
    <title>小黑java=黑狗</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type="text/javascript" language="JavaScript1.2">
     function lite(obj) { 
        if(document.all&&!window.opera) { 
        obj.filters.blendTrans.apply(); 
        obj.filters.blendTrans.play(); 
        }
    }
    </script>
    <style type="text/css">
    <!--
    body {
    font-size: 10pt;
    color: black;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: white;
    }.menuHeader {
    border: 1px #990000 solid;
    font-weight: bold;
    background-color: #cc6666;
    color: white;
    padding-left: 5px;
    width: 130px; /* 135-5*/
    margin-bottom: 2px;
    }a.menu { /* properties that are the same for all types */
    display: block;
    padding: 1px;
    color: #000066;
    background-color: white;
    text-decoration: none;
    font-weight: bold;
    width: 133px; /* 135-1-1 */
    border: 1px #990000 solid;
    margin: 3px 0px 0px 0px;
    }a.menu:link {
    margin: 3px 0px 0px 0px;
    color: #000066;
    }a.menu:visited {
    color: #660099;
    }a.menu:hover {
    color: white;
    background-color: #cc6666;
    }a.menu:active {
    color: #CC0000;
    }
    -->
    </style></head>
    <body>
    <table>
    <tr>
    <td>
    <a href="#" class="menu" onMouseOver="lite(this)"
    onMouseOut="lite(this)" style="filter: blendTrans(duration = 0.5);">小黑java=黑狗</a>
    </td>
    </tr>
    <tr>
    <td>
    <a href="#" class="menu" onMouseOver="lite(this)"
    onMouseOut="lite(this)" style="filter: blendTrans(duration = 0.5);">小黑java=黑狗
    </a>
    </td>
    </tr>
    <tr>
    <td>
    <a href="#" class="menu" onMouseOver="lite(this)"
    onMouseOut="lite(this)" style="filter: blendTrans(duration = 0.5);">小黑java=黑狗
    </a>
    </td>
    </tr>
    <tr>
    <td>
    <a href="#" class="menu" onMouseOver="lite(this)"
    onMouseOut="lite(this)" style="filter: blendTrans(duration = 0.5);">小黑java=黑狗
    </a>
    </td>
    </tr>
    <tr>
    <td>
    <a href="#" class="menu" onMouseOver="lite(this)"
    onMouseOut="lite(this)" style="filter: blendTrans(duration = 0.5);">小黑java=黑狗
    </a>
    </td>
    </tr>
    <tr>
    <td>
    <a href="#" class="menu" onMouseOver="lite(this)"
    onMouseOut="lite(this)" style="filter: blendTrans(duration = 0.5);">小黑java=黑狗</a>
    </td>
    </tr>
    <tr>
    <td>
    <a href="#" class="menu" onMouseOver="lite(this)"
    onMouseOut="lite(this)" style="filter: blendTrans(duration = 0.5);">小黑java=黑狗</a>
    </td>
    </tr>
    <tr>
    <td>
    <a href="#" class="menu" onMouseOver="lite(this)"
    onMouseOut="lite(this)" style="filter: blendTrans(duration = 0.5);">小黑java=黑狗
    </a>
    </td>
    </tr>
    <tr>
    <td>
    <a href="#" class="menu" onMouseOver="lite(this)"
    onMouseOut="lite(this)" style="filter: blendTrans(duration = 0.5);">小黑java=黑狗
    </a>
    </td>
    </tr> </table></body>我 就加了些tr td 还不没看太明白楼主的意思。
      

  6.   

    楼主 你把
     new ColorFade(objs[i], { StartColor: "#333", EndColor: "#fff", Speed: 20 });
        new ColorFade(objs[i], { StartColor: "#f6f6f6", EndColor: "#3ea936", Background: true, Speed: 20 });
    这两句 后面的Speed换成大一点的时间 然后一直放到一行上面  看看是渐变不
    StartColor  EndColor 分别是从StartColor  过渡到EndColor颜色  所以你可以自己设置想要的颜色
      

  7.   


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Javascript 颜色渐变效果</title>
    <script type="text/javascript">
    var $ = function (id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    };var Class = {
      create: function() {
        return function() {
          this.initialize.apply(this, arguments);
        }
      }
    }Object.extend = function(destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
        return destination;
    }function addEventHandler(oTarget, sEventType, fnHandler) {
        if (oTarget.addEventListener) {
            oTarget.addEventListener(sEventType, fnHandler, false);
        } else if (oTarget.attachEvent) {
            oTarget.attachEvent("on" + sEventType, fnHandler);
        } else {
            oTarget["on" + sEventType] = fnHandler;
        }
    };var ColorFade = Class.create();
    ColorFade.prototype = {
      initialize: function(Obj, options) {
        this._obj = $(Obj);
        this._timer = null;
        
        this.SetOptions(options);
        this.Step = Math.abs(this.options.Step);
        this.Speed = Math.abs(this.options.Speed);
        this.StartColor = this._color = this.GetColors(this.options.StartColor);
        this.EndColor = this.GetColors(this.options.EndColor);
        this._arrStep = [this.GetStep(this.StartColor[0], this.EndColor[0]), this.GetStep(this.StartColor[1], this.EndColor[1]), this.GetStep(this.StartColor[2], this.EndColor[2])];
        this._set = !this.options.Background ? function(color){ this._obj.style.color = color; } : function(color){ this._obj.style.backgroundColor = color; };
        
        this._set(this.options.StartColor);
        
        var oThis = this;
        addEventHandler(this._obj, "mouseover", function(){ oThis.Fade(oThis.EndColor); });
        addEventHandler(this._obj, "mouseout", function(){ oThis.Fade(oThis.StartColor); });
      },
      //设置默认属性
      SetOptions: function(options) {
        this.options = {//默认值
          StartColor:    "#000",//定义原来的颜色
          EndColor:        "#DDC",//定义要渐变的颜色
          Background:    false,//是否背景变色(默认文字)
          Step:            20,//渐变级数
          Speed:        10//渐变速度
        };
        Object.extend(this.options, options || {});
      },
      //获取颜色数据    
      GetColors: function(sColor) {
        sColor = sColor.replace("#", "");
        var r, g, b;
        if (sColor.length > 3) {
            r = Mid(sColor, 0, 2); g = Mid(sColor, 2, 2); b = Mid(sColor, 4, 2);
        } else {
            r = Mid(sColor, 0, 1); g = Mid(sColor, 1, 1); b = Mid(sColor, 2, 1); r += r; g += g; b += b;
        }
        return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];
      },
      //获取渐变颜色数据
      GetColor: function(c, ec, iStep) {
        if (c == ec) { return c; }
        if (c < ec) { c += iStep; return (c > ec ? ec : c); }
        else { c -= iStep; return (c < ec ? ec : c); }
      },
      //获取渐变级数
      GetStep: function(start, end) {
        var iStep = Math.abs((end - start) / this.Step);
        if(iStep > 0 && iStep < 1) iStep = 1;
        return parseInt(iStep);
      },
      //颜色渐变
      Fade: function(rColor) {
        clearTimeout(this._timer);
        
        var er = rColor[0], eg = rColor[1], eb = rColor[2], r = this.GetColor(this._color[0], er, this._arrStep[0]), g = this.GetColor(this._color[1], eg, this._arrStep[1]), b = this.GetColor(this._color[2], eb, this._arrStep[2]);
        
        this._set("#" + Hex(r) + Hex(g) + Hex(b));
        this._color = [r, g, b];
        
        if(r != er || g != eg || b != eb){ var oThis = this; this._timer = setTimeout(function(){ oThis.Fade(rColor); }, this.Speed); }
      }
    };//返回16进制数
    function Hex(i) {
        if (i < 0) return "00";
        else if (i > 255) return "ff";
        else { var str = "0" + i.toString(16); return str.substring(str.length - 2); }
    }//仿asp的mid 截字
    function Mid(string, start, length) {
        if (length) return string.substring(start, start + length);
        else return string.substring(start);
    }
    </script>
    </head><body><div id="idDiv" style="padding:10px;">颜色渐变效果</div><style type="text/css">
    #otbl{ clear:both; height:35px; background:#DBDBDB; width:560px;}</style><TABLE id="otbl">
    <TR>
        <TD>dddddd</TD>
        <TD>fffff</TD>
        <TD>fffff</TD>
        <TD>fffff</TD>
    </TR>
    <TR>
        <TD>dddddd</TD>
        <TD>fffff</TD>
        <TD>fffff</TD>
        <TD>fffff</TD>
    </TR>
    <TR>
        <TD>dddddd</TD>
        <TD>fffff</TD>
        <TD>fffff</TD>
        <TD>fffff</TD>
    </TR>
    <TR>
        <TD>dddddd</TD>
        <TD>fffff</TD>
        <TD>fffff</TD>
        <TD>fffff</TD>
    </TR>
    </TABLE><script>
    new ColorFade("idDiv", { StartColor: "#000", EndColor: "#fff" });
    new ColorFade("idDiv", { StartColor: "#fff", EndColor: "#000", Background: true });var objs = document.getElementById("otbl").rows;
    for(var i = 0, len = objs.length; i < len; i++){
        new ColorFade(objs[i], { StartColor: "#333", EndColor: "#fff", Speed: 20 });
        new ColorFade(objs[i], { StartColor: "#f6f6f6", EndColor: "#cc6666", Background: true, Speed: 20 });
    }
    </script>
    </body>
    </html>换成你的颜色  看看有什么区别?
      

  8.   

    javascipt高手来了也解决不了你的问题。
    a.menu:link { 
        margin:3px 0px 0px 0px;
        color:#000066; 
        }
    a.menu:visited { 
        color:#660099; 
        }
    a.menu:hover { 
        color:white;
        background-color:#cc6666;
        }
    a.menu:active { 
        color:#CC0000; 
        }
    关键是这个，还有用了fliter实现渐变。但是很遗憾
    ie6并不能支持td:hover，所有的伪对象只支持了a。
    在ff上可以
    这也就是为什么作者要把好好的a用css伪装成表格来进行处理得原因
      

  9.   

    楼主  你先把我16楼的代码 复制到html文件看看效果是你想要的么？ 如果是 那再说
      

  10.   

    2楼的代码就是根据时间和你设置的速度，用setTimeOut，多调用几次退色函数。
      

  11.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    这个要定义好 其余的你就按我那写对了 就没问题