实现表格中行点击时的渐扩效果！- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 实现表格中行点击时的渐扩效果！

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 70 ::

收藏到网摘: n/a

用js+xml自动生成表格的东西多图展示滑动过渡效果

曾经在一个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+xml自动生成表格的东西多图展示滑动过渡效果

评论 (0) All