如何实现表格中行点击时的渐扩效果！_javascript技巧

曾经在一个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> <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> >>点击上面的表格，可以看到行渐扩效果
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]