实现表格中行点击时的渐扩效果！


答案：曾经在一个flash RIA站点上看到这种效果，视觉效果真不错。flash开发者大概也以此来表明，flash做的应用程序，在动态效果上要优于js（个人观点）。后来我在做bmail的时候，用gif动画作为背景，基本实现了这一功能，但总是感到不太完美。这次的做法是用滤镜，视觉上比较平滑，还省了图片下载的麻烦。 
<style> 
#tbList th{text-align:left;padding-left:20;border:1px solid white;border-right:1px solid #7994BF;border-bottom:1px solid #7994BF} 
#tbList td{padding-left:6;border-top:1px solid white;border-bottom:1px solid #CDD0E1} 
</style> 
<body style=font-size:12> 
<table id=tbList cellpadding=0 cellspacing=0 width=100% style=cursor:default;font-size:12> 
    <tr height=25 bgcolor=#C1D1EA> 
        <th width=160>寄件人</th> 
        <th>主题</th> 
        <th width=90>日期</th> 
        <th width=90>大小</th> 
    </tr> 
    <tr height=25> 
        <td>关羽</td> 
        <td>大意失荆州</td> 
        <td>8月7日</td> 
        <td>4k</td> 
    </tr> 
    <tr height=25> 
        <td>张飞</td> 
        <td>长板坡一吼，吓退十万雄兵</td> 
        <td>3月24日</td> 
        <td>5k</td> 
    </tr> 
    <tr height=25> 
        <td>赵云</td> 
        <td>最帅莫过赵子龙</td> 
        <td>3月24日</td> 
        <td>3k</td> 
    </tr> 
</table> 

 
>>点击上面的表格，可以看到行渐扩效果 
</body> 
<script> 
document.getElementById("tbList").onmousedown=function(e){ 
    var tb=this,tr,ee 
    ee=e==null?event.srcElement:e.target 
    if(ee.tagName!="TD") 
        return 
    tr=ee.parentNode 
    if(tb.selRow!=null) 
        setTrReveal(tb.selRow,"background:white",1) 
    setTrReveal(tr,"background:#EAEAEA") 
    tb.selRow=tr 
} 
function setTrReveal(tr,css,noDelay){ 
    var i 
    if(!document.all) 
        return tr.style.cssText+=";"+css 
    for(i=0;i< tr.cells.length;i++){ 
        if(noDelay){ 
            tr.cells[i].style.cssText+=";"+css 
            continue 
        } 
        tr.cells[i].style.filter="progid:DXImageTransform.Microsoft.RevealTrans(duration=0.5,transition=16)" 
        tr.cells[i].filters[0].apply() 
        tr.cells[i].style.cssText+=";"+css 
        tr.cells[i].filters[0].play() 
    } 
} 
</script>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上一个：优化JavaScript脚本的性能的几个注意事项
下一个：多图幻灯Wipe擦洗效果
更多图片编程知识: