【长夜漫漫无心睡眠,只因心中大有疑问】请教各位达人

<tr id="td" onmouseover="test('td')" onmouseout="test2('td')">
    <td >
    <font id="tt_td">aaaaaa</font>
    </td><td>dgdfgdg</td>
</tr>把动作放在TR上

解决方案 »

  1.   

        function test(id){  //逐渐变黑
            var o = document.getElementById(id)
    clearTimeout(o.a);clearTimeout(o.b);
    if(o.colorNumber == 0 && o.colorNumber2 == 255) return;
    if(!o.colorNumber) o.colorNumber=255
    if(!o.colorNumber2) o.colorNumber2=0
            o.colorNumber -= 17;
            o.colorNumber2 += 17;
            if(o.colorNumber < 0){ o.colorNumber = 0; }
            if(o.colorNumber2 > 255){ o.colorNumber2 = 255; }
            c2 = getColor(o.colorNumber2);
            c = getColor(o.colorNumber);
            o.style.background = "#"+c+c+c;
            document.getElementById("tt_"+id).style.color = "#"+c2+c2+c2;
            o.a=setTimeout("test('"+id+"')",39);
        }
        function test2(id){  //逐渐变白
            var o = document.getElementById(id)
    clearTimeout(o.a);clearTimeout(o.b);
    if(o.colorNumber == 255 && o.colorNumber2 == 0) return;
    if(!o.colorNumber) o.colorNumber=0
    if(!o.colorNumber2) o.colorNumber2=255
            o.colorNumber += 17;
            o.colorNumber2 -= 17;
            if(o.colorNumber > 255){ o.colorNumber = 255; }
            if(o.colorNumber2 < 0){ o.colorNumber2 = 0; }
            //alert(c);
            c = getColor(o.colorNumber);
            c2 = getColor(o.colorNumber2);
            o.style.background = "#"+c+c+c;
            document.getElementById("tt_"+id).style.color = "#"+c2+c2+c2;
            o.b=setTimeout("test2('"+id+"')",39);    }
        
        function getColor(number){  //返回16进制数
            if(number<0){
                return "00";
            }
            if(number>255){
                return "FF"
            }
            var color = number.toString(16);
            if(color.length==1){        
                color = "0"+color;
            }
            return color;
        }
      

  2.   

    <tr id="td" onmouseover="test('td')" onmouseout="test2('td')">
        <td >
        <font id="tt_td">aaaaaa</font>
        </td><td>dgdfgdg</td>
    </tr>
      

  3.   


    <tr id="td" onmouseover="test('td')" onmouseout="test2('td')"> 
      

  4.   

    结合了楼上几位的意见，加以改进了一下，LZ试试
    <!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>无标题文档</title>
    </head>
    <script type="text/javascript">
        function test(id){  //逐渐变黑
            var o = document.getElementById(id)
            clearTimeout(o.a);clearTimeout(o.b);
            if(o.colorNumber == 0 && o.colorNumber2 == 255) return;
            if(!o.colorNumber) o.colorNumber=255
            if(!o.colorNumber2) o.colorNumber2=0
            o.colorNumber -= 17;
            o.colorNumber2 += 17;
            if(o.colorNumber < 0){ o.colorNumber = 0; }
            if(o.colorNumber2 > 255){ o.colorNumber2 = 255; }
            c2 = getColor(o.colorNumber2);
            c = getColor(o.colorNumber);
            o.style.background = "#"+c+c+c;
            document.getElementById("tt_"+id).style.color = "#"+c2+c2+c2;
    document.getElementById("tt_"+id+"1").style.color = "#"+c2+c2+c2;        o.a=setTimeout("test('"+id+"')",39);
        }
        function test2(id){  //逐渐变白
            var o = document.getElementById(id)
            clearTimeout(o.a);clearTimeout(o.b);
            if(o.colorNumber == 255 && o.colorNumber2 == 0) return;
            if(!o.colorNumber) o.colorNumber=0
            if(!o.colorNumber2) o.colorNumber2=255
            o.colorNumber += 17;
            o.colorNumber2 -= 17;
            if(o.colorNumber > 255){ o.colorNumber = 255; }
            if(o.colorNumber2 < 0){ o.colorNumber2 = 0; }
            //alert(c);
            c = getColor(o.colorNumber);
            c2 = getColor(o.colorNumber2);
            o.style.background = "#"+c+c+c;
            document.getElementById("tt_"+id).style.color = "#"+c2+c2+c2;
    document.getElementById("tt_"+id+"1").style.color = "#"+c2+c2+c2;
            o.b=setTimeout("test2('"+id+"')",39);    }
        
        function getColor(number){  //返回16进制数
            if(number<0){
                return "00";
            }
            if(number>255){
                return "FF"
            }
            var color = number.toString(16);
            if(color.length==1){        
                color = "0"+color;
            }
            return color;
        }
    </script>
    <body>
        <table align="center" border="0" width="200"bordercolor="#000099">
        <tr id="td" onmouseover="test('td')" onmouseout="test2('td')">
        <td>
        <font id="tt_td">aaaaaa</font>
        </td>
    <td>
        <font id="tt_td1">bbbb</font>
        </td>
        </tr>
        <tr id="td2" onmouseover="test('td2')" onmouseout="test2('td2')">
        <td>
        <font id="tt_td2">aaaaaa</font>
        </td>
    <td>
        <font id="tt_td21">bbbb</font>
        </td>
        </tr>
        <tr id="td3" onmouseover="test('td3')" onmouseout="test2('td3')">
        <td>
        <font id="tt_td3">aaaaaa</font>
        </td>
    <td>
        <font id="tt_td31">bbbb</font>
        </td>
        </tr>
        </table>
    </body>
    </html>
      

  5.   

    <!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>无标题文档</title>
    </head>
    <script language="javascript">
    <!--
    var steplength=32;
    var waitlength=39;
    function feedin(obj){
    obj.red=255
    obj.green=255;
    obj.blue=255;
    if(obj.interval!=null) clearInterval(obj.interval);
    var func=function(){
    obj.red-=steplength;
    obj.green-=steplength;
    obj.blue-=steplength;
    var color="#"+getColor(obj.red)+getColor(obj.green)+getColor(obj.blue);
    obj.style.background=color;

    if(obj.red<0||obj.green<0||obj.blue<0){
    clearInterval(obj.interval);
    }
    }
    obj.interval=setInterval(func,waitlength);
    }function feedout(obj){
    obj.red=0
    obj.green=0;
    obj.blue=0;
    if(obj.interval!=null) clearInterval(obj.interval);
    var func=function(){
    obj.red+=steplength;
    obj.green+=steplength;
    obj.blue+=steplength;
    var color="#"+getColor(obj.red)+getColor(obj.green)+getColor(obj.blue);
    obj.style.background=color;

    if(obj.red<0||obj.green<0||obj.blue<0){
    clearInterval(obj.interval);
    }
    }
    obj.interval=setInterval(func,waitlength);
    }function changecolor(stepred,stepgreen,stepblue){
    red=red+stepred;
    green=green+stepgreen;
    blue=blue+stepblue;
    return ("#"+getColor(red)+getColor(green)+getColor(blue));
    }function getColor(number){  //返回16进制数
    if(number<0){
    return "00";
    }
    if(number>255){
    return "FF"
    }
    var color = number.toString(16);
    if(color.length==1){        
    color = "0"+color;
    }
    return color;
    }
    -->
    </script>
    <style type="text/css">
    <!--
    .shade {
    text-align:center;
    star : expression(
    onmouseover=function(){
    feedin(this);
    },
    onmouseout=function(){
    feedout(this);
    }
    )
    }
    -->
    </style>
    <body>
        <table align="center" border="0" width="200">
        <tr><td class="shade">第一行文字</td></tr>
        <tr><td class="shade">第二行文字</td></tr>
        <tr><td class="shade">第三行文字</td></tr>
        <tr><td class="shade">第四行文字</td></tr>
        <tr><td class="shade">第五行文字</td></tr>
        <tr><td class="shade">第六行文字</td></tr>
        <tr><td class="shade">第七行文字</td></tr>
        <tr><td class="shade">第八行文字</td></tr>
        <tr><td class="shade">第九行文字</td></tr>
        <tr><td class="shade">第十行文字</td></tr>
        </table>
    </body>
    </html>把分给我吧……
      

  6.   

    <!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>无标题文档 </title> 
    </head> 
    <script language="javascript"> 
    <!-- 
    var steplength=32; 
    var waitlength=39; 
    function feedin(obj){ 
    obj.red=255 
    obj.green=255; 
    obj.blue=255; 
    if(obj.interval!=null) clearInterval(obj.interval); 
    var func=function(){ 
    obj.red-=steplength; 
    obj.green-=steplength; 
    obj.blue-=steplength; 
    var color="#"+getColor(obj.red)+getColor(obj.green)+getColor(obj.blue); 
    obj.style.background=color; if(obj.red <0||obj.green <0||obj.blue <0){ 
    clearInterval(obj.interval); 
    } 
    } 
    obj.interval=setInterval(func,waitlength); 
    } function feedout(obj){ 
    obj.red=0 
    obj.green=0; 
    obj.blue=0; 
    if(obj.interval!=null) clearInterval(obj.interval); 
    var func=function(){ 
    obj.red+=steplength; 
    obj.green+=steplength; 
    obj.blue+=steplength; 
    var color="#"+getColor(obj.red)+getColor(obj.green)+getColor(obj.blue); 
    obj.style.background=color; if(obj.red <0||obj.green <0||obj.blue <0){ 
    clearInterval(obj.interval); 
    } 
    } 
    obj.interval=setInterval(func,waitlength); 
    } function changecolor(stepred,stepgreen,stepblue){ 
    red=red+stepred; 
    green=green+stepgreen; 
    blue=blue+stepblue; 
    return ("#"+getColor(red)+getColor(green)+getColor(blue)); 
    } function getColor(number){  //返回16进制数 
    if(number <0){ 
    return "00"; 
    } 
    if(number>255){ 
    return "FF" 
    } 
    var color = number.toString(16); 
    if(color.length==1){        
    color = "0"+color; 
    } 
    return color; 
    } 
    --> 
    </script> 
    <style type="text/css"> 
    <!-- 
    .shade { 
    text-align:center; 
    star : expression( 
    onmouseover=function(){ 
    feedin(this); 
    }, 
    onmouseout=function(){ 
    feedout(this); 
    } 
    ) 
    } 
    --> 
    </style> 
    <body> 
        <table align="center" border="0" width="200"> 
        <tr> <td class="shade">第一行文字 </td> </tr> 
        <tr> <td class="shade">第二行文字 </td> </tr> 
        <tr> <td class="shade">第三行文字 </td> </tr> 
        <tr> <td class="shade">第四行文字 </td> </tr> 
        <tr> <td class="shade">第五行文字 </td> </tr> 
        <tr> <td class="shade">第六行文字 </td> </tr> 
        <tr> <td class="shade">第七行文字 </td> </tr> 
        <tr> <td class="shade">第八行文字 </td> </tr> 
        <tr> <td class="shade">第九行文字 </td> </tr> 
        <tr> <td class="shade">第十行文字 </td> </tr> 
        </table> 
    </body> 
    </html>